画像をTABLEで組んだとき、画像間にすき間が生じる落とし穴

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

　画像をスライスで複数に分割し、一枚の画像として見えるよう＜TABLE＞タグでコーディングしたとき、Macintosh版Inter
net Explorer5以外のブラウザで確認した際、画像間に1px程度のすき間が生じる場合がある。このような見え方になる原因は、ソース上の＜TD＞タグの位置である。

　この現象を防ぐためには、＜TD＞?＜/TD＞を1行で記述し、途中で改行を入れないようにする必要がある。

　また、＜/TD＞のあとに改行を入れている場合であっても、改行の手前に半角スペースなどが混入していることが原因で、同様のすき間が生じてしまう【1】【2】。Dreamweaverなどのオーサリングソフトを使用している場合、環境設定で「＜TD＞のあとに改行を入れない」など、ソースフォーマットの体裁を設定することができるので、あらためて自分の設定状況を確認しよう。また、最終確認をする際に「＞ ＜」を「＞＜」に「検索・置換」処理をかけることで、より正確に余分なスペースを取り除くことができる【3】。

解説：横山 剛

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