Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。
| |
 |
 |
フォームタグまわりの余白がレイアウトを崩す落とし穴 |
 |
テーブルの枠の中に、＜FORM＞タグを挿入した場合、Windows版IE以外のブラウザで閲覧した際に、テキストエリアなど、フォーム要素の下の行に余分なスペースができてしまう【1】。このようなスペースをCSSのマージン指定などで回避する方法もあるが、今回は単純にソースの記述順序を書き換えるだけで回避する方法を紹介しよう。
【2】のソースでは、＜TD＞～＜/TD＞内に＜FORM＞～＜/FORM＞が挿入されている。これを【3】のソースのように＜TD＞～＜/TD＞の外に、＜FORM＞タグおよび＜/FORM＞タグを移動させることで、ほかのセル内にレイアウト崩れなどの影響を及ぼすことなく表示させることができる【4】。
今回のようなケースは、オーサリングソフトを使用してソースに十分に注意を払っていない場合に起こりやすく、原因がわからないままになっていることがある。オーサリングソフトでコーディングしたHTMLは、タグの記述順序が乱れていることがよくあるので、必ず最後に見直す習慣をつけよう。
| |
 |
【1】余分なスペースができている
| ＜tr＞ ＜td colspan="2"＞ ＜form name="form1" method="post" action=""＞ ＜div align="center"＞ ＜input name="textarea" type="text" value="テキスト入力"＞ ＜input type="submit" name="Submit" value="送信"＞ ＜/div＞ ＜/form＞ ＜/td＞ ＜/tr＞ |
【2】＜TD＞～＜/TD＞内に＜FORM＞タグが収まっている
| |
＜tr＞ ＜form name="form1" method="post" action=""＞ ＜td colspan="2"＞ ＜div align="center"＞ ＜input name="textarea" type="text" value="テキスト入力"＞ ＜input type="submit" name="Submit" value="送信"＞ ＜/div＞ ＜/td＞ ＜/form＞ ＜/tr＞ |
【3】＜TD＞～＜/TD＞の外に＜FORM＞タグを出し、＜TR＞～＜/TR＞内に収まっている
| |
 |
【4】余分なスペースができることを避けられる
解説：横山 剛
（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）
