CSSはどのように ―
「デザインの言語」になったか

「見た目」はHTMLの責務ではなかった

1993年、最初のWebブラウザ「Mosaic」がリリースされたとき、HTMLには<font>もbgcolorも存在しなかった。HTMLは文書の「構造」を記述するための言語であり、それがどう見えるかはブラウザが決めるものだった。Tim Berners-Leeが設計したHTMLは、情報の意味を機械が理解できる形で表現するためのものであって、視覚表現のための道具ではなかったのだ。

ところが現実はそうはいかなかった。Webが爆発的に普及するにつれて、制作者たちは「もっと自由にレイアウトしたい」「文字のサイズを変えたい」「背景に色をつけたい」と強く望むようになった。そのニーズに応えるために、HTMLには次々と見た目に関わる要素や属性が追加されていった。<font>タグ、bgcolor属性、<center>タグ……。これらは技術的には機能したが、構造と見た目が混在したHTMLは、保守も再利用も困難な「汚い」ものになっていった。

こうした状況に疑問を呈したのが、1994年にCERNに在籍していたHåkon Wium Lieだった。彼はTim Berners-Leeへの提案書のなかで「スタイルシート」という概念を持ち込み、文書の見た目は構造から分離されるべきだと主張した。これがCSSの原点だ。1996年、W3Cは「Cascading Style Sheets Level 1（CSS1）」を勧告として発表した。しかし当時のブラウザのサポートは壊滅的で、「理論としては正しいが、実際には使えない」という奇妙な状況がしばらく続いた。

テーブルレイアウトという「発明」と「歪み」

CSSが実用に耐えなかった1990年代後半、Webデザイナーたちが目をつけたのが<table>要素だった。本来は表形式のデータを表示するためのタグだが、これを入れ子にすることで複雑なグリッドレイアウトを実現できることに気づいた制作者たちは、テーブルをレイアウトエンジンとして使い始めた。透明なGIF画像（いわゆる「スペーサーGIF」）をセルに詰めてピクセル単位で余白を調整するという、今から見ると信じがたいような技法も生まれた。

テーブルレイアウトは確かに動いた。精緻なマルチカラムデザイン、ピクセルパーフェクトな紙面のような画面構成。当時のポータルサイトやニュースサイトのデザインは、その多くがテーブルの入れ子によって作られていた。しかしその代償は小さくなかった。HTMLのソースコードはレイアウト情報でぐしゃぐしゃに汚れ、意味的な構造は完全に失われ、アクセシビリティの問題も深刻だった。スクリーンリーダーはテーブルを「表」として読み上げようとするため、レイアウト用テーブルとの相性は最悪だった。

「Web標準」運動とCSSが救ったもの

2000年代初頭、Jeffrey Zeldmanを中心とした「Web標準プロジェクト（WaSP）」が声を上げた。テーブルレイアウトからの脱却、HTMLの意味的な使用、そしてCSSによるスタイリングの徹底。これは単なる技術論ではなく、Webの本来あるべき姿についての哲学的な主張だった。「構造と見た目を分離する」という原則は、後にWebの設計思想の根幹に据えられることになる。

2003年、Dave Shea が公開した「CSS Zen Garden」は象徴的なプロジェクトだった。一切同じHTMLを使いながら、CSSだけを差し替えることで、まったく異なるデザインを生み出せることを実証してみせた。このプロジェクトが与えたインパクトは大きく、「CSSはちゃんと使えば強力なデザインツールになる」という認識が一気に広まった。

しかし現実には、floatを使ったレイアウトには多くの制約があった。floatは本来、テキストの回り込みのためのプロパティであって、レイアウト全体を制御するためのものではなかった。clearfixハックと呼ばれるCSSの裏技が広く使われ、制作者は「なぜこれでうまくいくのか理論的には謎だが、動くから使う」という状況で仕事をしていた。CSSはデザインの言語になろうとしていたが、その文法はまだ不完全だった。

FlexboxとGridが変えた「設計の思想」

Flexboxの登場は、CSSの書き方を変えただけでなく、レイアウトの「考え方」そのものを変えた。それまでのfloatレイアウトは「要素をどこに浮かせるか」という発想だったが、Flexboxは「要素同士の関係をどう定義するか」という発想に切り替えた。justify-content: centerの一行で、何年もの間ハックで実現していた「垂直中央揃え」が解決されたとき、多くの制作者が安堵のため息をついたはずだ。

そしてCSS Grid Layoutの登場は、さらに大きな転換点だった。Gridはフレームワーク（Bootstrap、Foundation）が「CSS側では実現できないから」という理由で独自に構築してきたカラムグリッドシステムを、CSS自身の機能として取り込んだ。12カラムのfloatベースグリッドを使うためだけに外部ライブラリを読み込む必要がなくなった。デザインの意図をそのままCSSに書けるようになったのだ。

/* Bootstrap 3 時代：HTMLにクラスを埋め込む */
<div class="row">
  <div class="col-md-8">メイン</div>
  <div class="col-md-4">サイドバー</div>
</div>

/* CSS Grid 現代：CSSで直接グリッドを定義する */
.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

この変化が意味することは小さくない。かつてレイアウトはHTMLの構造に依存していたが、今日ではCSSが「このページをどう分割するか」という設計判断を持っている。デザイナーがスケッチブックに描いたグリッドをそのままCSSに翻訳できる時代が来た。「実装の制約」がデザインを制限する度合いが、確実に下がってきた。

CSSはいま、UIアーキテクチャの言語になろうとしている

2022年以降、CSSに追加された機能群は、これまでとは別次元の話をしている。Container Queriesは、コンポーネントが「自分のコンテナの幅」に応じてスタイルを変えることを可能にした。これはReactやVueのようなコンポーネント指向の開発スタイルとCSSの設計思想が、ついに整合し始めたことを意味する。

:has()セレクタは「親要素を子要素の状態で選択する」という、長年「CSSでは不可能」と言われてきた操作を実現した。Cascade Layersは、スタイルの優先順位を明示的に管理できる仕組みを導入し、大規模なCSSのアーキテクチャ設計に新しい選択肢をもたらした。これらは「デザインをきれいに見せる」ためのツールではなく、「複雑なUIシステムを保守可能な形で構築する」ためのツールだ。

思えば、CSSの歴史は常に「制作者が本当にやりたいこと」と「仕様が提供できること」のギャップを埋める歴史だった。テーブルレイアウト、floatハック、Bootstrap依存——これらはすべて、CSSが「まだそこまで表現できなかった時代」の産物だ。そのギャップが少しずつ埋まるたびに、CSSは「装飾の言語」から「設計の言語」へとその性格を変えてきた。

今のCSSを見ていると、それはもはや「HTMLに色をつけるもの」ではない。UIの構造、コンポーネントの振る舞い、レイアウトの哲学——そういった抽象的な設計判断を、具体的なコードとして表現するための言語へと成長している。30年かけて、CSSはようやく「デザインの言語」と呼ばれるにふさわしいものになった。そしておそらく、この進化はまだ終わっていない。