この物語はフィクションです。
……と言いたいところですが、現場で実際に確認された歴史をもとに構成しています。

「昔はどうやってホームページを作っていたんですか？」
そう聞かれることがあります。

最近Web制作を始めた人からすると、
display: flex;やGridが当たり前で、
「レイアウトを組む」ということ自体に苦労した経験がないかもしれません。

しかし、その昔。
CSSはまだ文明の中心ではありませんでした。

レイアウトは「表」で作るものだった

今なら「表組み」と聞くと、料金表や一覧表を思い浮かべます。
しかし当時は違いました。
画面を左右に分ける。
ヘッダーを作る。
サイドバーを置く。
そのすべてが……

<table> でした。

<table>
  <tr>
    <td>メニュー</td>
    <td>コンテンツ</td>
  </tr>
</table>

今見ると驚くようなコードですが、当時はこれが普通でした。
むしろ、「きれいに表示された！」と感動していた時代です。

テーブルは万能だった

今の感覚では「レイアウトにtableを使うのは良くない」と言われます。
しかし当時の私たちにとって、tableは救世主でした。

• 高さが揃う。
• 横並びになる。
• 崩れにくい。
• 何より、表示される。

これだけで十分だったのです。

CSSという新しい文明

やがてCSSが登場します。
「デザインはCSSで管理しましょう。」
そんな新しい考え方が広まり始めました。

• 背景色。
• 文字サイズ。
• 余白。
• 装飾。
• HTMLから見た目を切り離せる。

当時としては革命的な出来事でした。
未来は明るい。
誰もがそう思っていました。
しかし、その希望は長くは続きません。
次に待っていたのは、
長きにわたる「float大戦」の始まりだったのです。

あとがき

今では、FlexやGridを使えば数行で完成するレイアウトも、当時は何倍もの時間をかけて作られていました。
だからこそ、昔のコードを見ると「なんでこんな書き方なんだろう」と思うことがあります。

でも、そのコードは決して間違いではありません。
その時代、その環境で、一番良い方法を選んだ結果なのです。
もし古い案件でtableレイアウトを見つけても、そっとこうつぶやいてみてください。

「CSSにバグはありません。そこには歴史があります。」

昔のコードを笑わないでください。
そこには、テーブルレイアウト文明があります。

次回予告
第二世代 float大戦

「横並びになった。」
誰もがそう喜んだ。
しかし、その代償として――

親要素の高さが消えた。
次回はいよいよ「float大戦」です。

float:left; clear:both;そしてclearfixの儀へと物語が進みます