フォームのスペースの落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　テーブル内にフォームオブジェクトを挿入すると、自動的に＜form＞タグの前後にスペースが入ってしまい、レイアウトが崩れてしまう【1】。また、Internet ExplorerとNetscapeではスペースの幅が異なるのでブラウザによって表示がバラバラになってしまう。

　この問題を解決するにはいくつか方法がある。まず、＜form＞～＜/form＞タグを＜table＞～＜/table＞の外に置くことだ。こうすることによりテーブル内にあるフォームにスペースは入らなくなる。ただ、この方法だとスペースをテーブルの外に移動させることでスペースを目立たなくさせることはできるが、実際スペースを消したことにはならない。

　完全にスペースを消したい場合は、CSSのmarginプロパティを使おう【2】。"margin: 0px;"にすることで、スペースを消すことができる。また、ある程度スペースを入れてレイアウトを調節したい場合は任意のピクセル数を記入しよう【3】。こうすることで、フォームのレイアウト崩れを防ぐことができる。

解説：横山 剛

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）