みんな大好き spacer.gif

1x1.gif should have won a fucking Grammy. Or a Pulitzer. Or Most Improved, Third Grade Gym Class or something.

Zach Holman - Only 90s Web Developers Remember This

spacer.gif、それは 1px × 1px の透過gifを widthheight で制御することにより、隙間を希望通りに変更してレイアウトを制御しようとするハックである。
要するに marginpadding の替わりである。
詳細な使い方はググれば山程出てくるはずなので、そちらを参考にされたい。

「なぜcssを使わないのか」「なぜpngじゃないのか」といった質問がある若者は近くのおじさんに聞きなさい。
あの頃の若者は文書の構造と体裁の分離だのセマンティックだのアクセシビリティだの何て難しいことは気にしなかったんだよ。

spacer.gif も今となってはテーブルレイアウト時代の遺産として皆の脳裏に深く刻まれているくらいであるが、その歴史は想像以上に古く、1996年に出版されたDavid Siegel(写真はAmazonと同じだけどこの人であってる?)の著書『Creating Killer Web Sites』によって知られるようになったらしい(尚、リンク先は1997年出版になっているがSecond Editionだからか?)。

以下で同氏のウェブサイトに書かれていた、おそらく本の元になっているであろう記事を読むことが出来るが、こちらでも Last modified: 3/14/96 となっている。
The Single-Pixel GIF Trick

なお、余談であるが彼は spacer.gif をリビングルームで考え出したらしい。
コードとにらめっこばっかりしていてはいけないよ、という教訓である(と、てんじろうは勝手に思った)。
justaddwater.dk | Who invented the spacer.gif?

Cascading Style Sheets, level 1 の勧告が1996年12月であることから、純粋にCSSが無い中で(ブラウザが最適化されてない等の理由からではなく)如何にしてレイアウトを制御するかという視点から生まれたものであると推測できる。

CSSの普及により完全におじさん方の昔話のネタくらいにしかならなくなってしまった spacer.gif ではあるが、冷静に時代背景を見つめなおしてみれば spacer.gif の誕生によってウェブサイトのレイアウトを制御するという考えが生まれた(広まった)と言っても決して過言では無いのではなかろうか。
そういった意味では、 spacer.gif こそが現在の果てしなく広がるウェブデザインの原点とも言えよう。

ありがとう spacer.gif、ありがとう David Siegel

最後に、最新の? spacer.gif を紹介しよう。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

もう僕らは、例え spacer.gif を使いたくなっても 1px × 1px の画像を作ったり準備したりする必要はないんだね。


CSS昔話 Advent Calendar 2015 6日目、あんまりCSSじゃない昔話でした。