[HTML]spacer.gifとdivのspacerは使っちゃダメ？

ホームページのデザイン調整に使う手法として
spacer.gifとdivのspacerなんかがあったりする。
僕は使ったことないけれども、たまにコード上で見かけるので
そもそもこれって使っていいものなのか？っていうのをまとめてみた。

spacer.gif

spacer.gifとは・・
1px × 1pxの透過gifのことで、主にWebデザインの微調整などに使われていた。
imgタグのwidth・height属性を使って画像を引き伸ばすことで、文字をズラしたりだとか
テーブル位置をズラしたりだとか…。
使い方としてはこんな感じ↓

<img alt="" src="spacer.gif" width="50" height="1" border="0" />

透過しているから背景が透明で、パッと見てもspacer.gifの存在はわからない。
よくもまぁこんな事を思いついたなと。

昔のシステムとかホームページを見たりすると使っている所がちらほら。
しかし、あくまでspacer.gifは”裏ワザ”的なものなので、あまりベーシックな方法ではない。
今ではCSSをしっかり使えば必要はないし、同じようなコードの繰り返しは見栄えもあまり良くない。

ということで現れたのがdivのspacer。

div.spacer

<div class="spacer"><!-- spacer --></div>

.spacer {
    clear: both;
    height: 50px;
    font-size: 1px;
}
/*font-sizeを0にしたり、widthを指定したりする方法もある*/

divにクラス指定して高さとかをCSS側で指定する。
クラス名をspacer10とかspacer5とかにして汎用的にしたり…。
正に現代版spacer。

これは意外と使えるんじゃないか？って思ったりするけれども、
海外のエンジニアQAサイト、stackoverflowでこんなのを見つけた。
Is using<div>spacers a bad practice?
「ぶっちゃっけdivのspacerって使っていいんすか？」(超意訳)
っていう質問に対して
「paddingとかmargin使ってね！」
「意味のないマークアップは使わないでね！」
って言われてる。確かに！

マークアップは要素をタグで囲うことによって構造の定義をしている。
それを考えると空のdivなんかはマークアップの考えからは外れてるから
ダメなのは当たり前だったね…。

スペーサーのまとめ

• spacer.gifはコードの可読性や構造を考える不適切
• div.spacerはマークアップ言語の概念から考えると不適切
• デザインの微調整にはmarginやpaddingなどを使うべき