CSSレイアウトの30年史 ―
テーブル、float、そしてGridへ至る道のり

はじまり ― HTMLにレイアウトという概念がなかった時代

1991年、ティム・バーナーズ＝リーがHTMLの最初の仕様を書いたとき、そこに「レイアウト」という概念は存在しませんでした。HTMLはもともと、CERN（欧州原子核研究機構）の研究者たちが論文や技術文書を共有するために設計されたマークアップ言語です。見出し、段落、リスト、リンク。文書を構造化するための最小限の要素しかなく、「要素を横に並べる」という発想そのものがなかったのです。

当時のWebブラウザは、文書を上から下に流し込むだけのビューアでした。Mosaic（1993年）やNetscape Navigator（1994年）がWebを一般の人々に開放していくなかで、企業や個人が「見た目をもっとコントロールしたい」と考えるようになります。しかし、HTMLにはその手段がほとんどありませんでした。

そこで人々が目をつけたのが、<table> タグでした。テーブルは本来、表形式のデータを表示するためのものです。しかし、行と列のグリッドに要素を配置できるという特性が、レイアウト用途に「流用」されることになります。テーブルレイアウトの時代のはじまりです。

テーブルレイアウトの時代 ― なぜそれが「正解」だったのか

1990年代後半から2000年代前半にかけて、テーブルレイアウトはWeb制作の事実上の標準でした。今では「アンチパターン」として語られることが多いですが、当時の状況を考えると、あれは合理的な選択だったと思います。

CSSはまだ生まれたばかりで、ブラウザの実装はバラバラ。Netscape NavigatorとInternet Explorerで同じCSSが異なる表示になるのは日常茶飯事でした。一方、<table> はどのブラウザでも比較的安定して動作しました。横に要素を並べ、高さを揃え、ネスト（入れ子）で複雑なレイアウトを構築する。テーブルは、CSSが成熟するまでの「つなぎ」として、確かに機能していたのです。

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">ヘッダー</td>
  </tr>
  <tr>
    <td width="200">サイドバー</td>
    <td>メインコンテンツ</td>
  </tr>
  <tr>
    <td colspan="2">フッター</td>
  </tr>
</table>

ただし、テーブルレイアウトには深刻な問題がありました。構造（HTML）と見た目（デザイン）が完全に混ざり合い、メンテナンスが極めて困難になること。「レイアウトを変更するにはHTMLを書き直す必要がある」という状況は、Webサイトが大規模化するにつれて深刻な足かせとなっていきます。

CSS + float の時代 ― 「Web標準」という革命

2000年代前半、Web制作の世界に大きな転換点が訪れます。「Web標準」（Web Standards）運動の台頭です。Jeffrey Zeldman（ジェフリー・ゼルドマン）が2003年に出版した『Designing with Web Standards（ウェブ標準デザイン）』は、業界に衝撃を与えました。HTMLは構造のために、CSSは見た目のために。この「関心の分離」という考え方が、テーブルレイアウトからの脱却を促していきます。

同じ時期、CSS Zen Garden（2003年）というプロジェクトが誕生します。ひとつのHTMLに対して、CSSだけを差し替えることでまったく異なるデザインを実現して見せたこのプロジェクトは、「CSSにはここまでの表現力がある」ということを世界中のデザイナーに証明しました。

しかし、当時のCSSには「レイアウトのためのプロパティ」がほとんど存在しませんでした。そこで使われたのが float です。float はもともと、テキストの回り込み（画像の横にテキストが流れる表現）のために設計されたプロパティです。レイアウトのために作られたものではありません。にもかかわらず、10年以上にわたってCSSレイアウトの主役を務めることになります。

float レイアウトには独特の「お作法」がありました。floatした要素は通常のフローから外れるため、親要素が高さを失います。これを防ぐための「clearfix」は、float 時代のWeb制作者にとって避けて通れない儀式でした。

/* clearfix ― 何百万のサイトで使われた */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

私がWebの仕事を始めたのは、ちょうどこのfloat全盛期でした。2カラムレイアウトを組むのに半日かかったこともありましたし、IE6で表示が崩れてデバッグに丸一日費やしたことも一度や二度ではありません。でも、あの経験があるからこそ、Flexboxの登場がどれほど革命的だったか、身をもって理解できます。

Flexbox ― 「レイアウトのためのCSS」がようやく誕生する

2009年、CSS Working Groupが「Flexible Box Layout」の最初のドラフトを公開しました。しかし、実用的に使えるようになるまでには長い時間がかかります。仕様は何度も改訂され、ブラウザの実装もベンダープレフィックス付きの試験的なものが入り乱れていました。

Flexboxが「実戦投入可能」になったのは、2015年前後のことです。IE11が最後のレガシーブラウザとして残り続けましたが（部分的なサポートのみ）、Chrome、Firefox、Safariが安定した実装を揃えたことで、現場でもようやく安心して使えるようになりました。

Flexboxは、CSSの歴史上はじめて「レイアウトのために設計された」プロパティでした。親要素に display: flex を書くだけで子要素が横に並ぶ。中央揃えが3行で終わる。余白の配分を自動で計算してくれる。float時代に必要だった「ハック」のほとんどが、正式なプロパティに置き換わったのです。

CSS Grid ― 二次元レイアウトの完成形

2017年、CSS Grid Layoutが主要ブラウザに実装されました。Flexboxが「一次元（行または列）」のレイアウトモデルだったのに対し、Gridは「二次元（行と列の両方を同時に）」制御できるレイアウトモデルです。

CSS Gridの実際の設計（仕様策定）を主導したのはMicrosoftのPhil Cupp、W3CのElika Etemad、GoogleのTab Atkins Jr.、Rossen Atanassovらであり、Gridの採用・普及を主導したのは、Rachel Andrew（レイチェル・アンドリュー）やJen Simmons（ジェン・シモンズ）といった開発者・アドボケイトたちです。特にJen Simmons は「Layout Land」というYouTubeチャンネルでGridの可能性を精力的に伝え、開発者コミュニティにおけるGridの理解と普及に大きく貢献しました。

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  min-height: 100vh;
}

CSS Gridは、テーブルレイアウトが解決しようとしていた「二次元配置」の問題を、構造と見た目を分離したまま解決する仕組みです。ある意味、Gridは「テーブルレイアウトの正当な後継者」とも言えるのではないでしょうか。30年かけて、Webはようやく「正しいレイアウト手段」を手に入れたのです。

そして今 ― レイアウトの「自由」をどう使うか

2026年現在、私たちはCSSの歴史上もっとも恵まれた環境にいます。Flexbox、Grid、コンテナクエリ、subgrid、:has() セレクタ。かつては不可能だったレイアウトが、数行のCSSで実現できる時代になりました。

しかし、ツールが豊かになったからこそ問われるのは、「何を選ぶか」というデザインの判断力ではないでしょうか。テーブルレイアウトの時代は選択肢がなかった。floatの時代はハックに頼るしかなかった。今はすべてが揃っている。だからこそ、なぜそのレイアウト手法を選ぶのか、という問いに向き合う必要があります。

CSSレイアウトの30年を振り返ると、そこにあるのは「不完全なツールで、それでも何とかしてきた人々の知恵と工夫」の積み重ねです。テーブルレイアウトも、float + clearfix も、その時代の最善策でした。それを「間違い」と切り捨てるのではなく、歴史の文脈の中で理解すること。そうすることで、今私たちが使っているFlexboxやGridがなぜこういう設計になっているのか、その理由が見えてきます。

あなたが今日書いたCSSの一行一行には、30年分の歴史が詰まっています。次に display: flex や display: grid と書くとき、その背景を少しだけ思い出してみてください。きっと、その一行が少しだけ、特別なものに感じられるはずです。