長い旅を続けていると、ふと振り返る瞬間がある。遥か昔に置き去りにしたものたちが、今の私たちをどれほど形作っているのかを思うと、少しだけ胸が締め付けられる。
この物語は、Webレイアウトの歴史を静かに振り返るものだ。かつての手法やアイデアがどのように生まれ、どのように消えていったのか。そして、どんな風に次の時代へと受け継がれたのか。
CSSと共に歩んだこの長い旅を振り返れば、その歴史は試行錯誤の連続だった。
1990年代：静的なページとtableレイアウトの時代
あの頃は、まだWebという世界が産声をあげたばかりの時代だった。ページはただの「文書」だったんだ。見た目のデザインはおまけみたいなもので、構造の中にスタイルを埋め込んで、なんとか整えていた。
思い出すよ、「tableレイアウト」が支配していた日々を。デザイナーたちはテーブルのセルにデザインを押し込めて、まるでパズルを組み立てるように苦労していた。表の中に空白のセルを使って「スペーサー」を配置したり、無理やりグリッドを作り出していたんだよね。あれは手間の塊だったけど、デザイナーたちはそれを当然だと思っていた。
でも、そんな方法には限界があった。変更があるたびに、すべてを作り直さなきゃいけなかったからね。それでも、あの不器用な手法は、初めてWebデザインに「整える」という概念をもたらした。
2000年代前半：CSSの台頭とセマンティックWeb
時代は移り変わり、CSSが静かに登場した。あれはまるで、誰も気づかないところに芽吹いた小さな草花みたいだった。CSSがもたらした変化は、まさに「見た目」と「構造」を分けるという考え方だった。デザインのルールを文書から切り離して、別の場所にまとめることで、変更が圧倒的に楽になったんだ。多くのデザイナーがその恩恵に気づくまでには少し時間がかかったけど。
とはいえ、すべてがスムーズに進んだわけじゃない。当時のブラウザはそれぞれ独自の解釈でCSSをレンダリングしていたから、「対応ブラウザの確認」という作業が必須だったんだ。IEとNetscapeが対立する時代、同じスタイルが異なる見え方になることなんて日常茶飯事だった。
「セマンティックWeb」という概念も、この頃に注目を集めた。意味を持つマークアップを書くことで、検索エンジンやアクセシビリティを向上させる動きが広まったんだ。でも、それは理想論に近くて、現場では「とりあえず動けばいい」という現実との板挟みも多かった。
2000年代後半：グリッドシステムとモダンブラウザの普及
ブラウザ戦争が終わりに近づくと、モダンブラウザが少しずつ普及していった。それに伴って、Webデザインの世界にも新たな風が吹き込まれた。それが「グリッドシステム」だった。
あの頃、「960GridSystem」というシンプルなグリッドシステムが話題をさらった。横幅を12のカラムに分けて、それぞれの要素を整列させる仕組み。これが登場してから、Webデザインが一気に洗練されたよね。
とはいえ、実装にはまだまだ手作業が多くて、デザイナーはよくこう言ってた。「グリッドに合わせるのはいいけど、細かいズレが気になるんだよ」って。それでもこの考え方が浸透したことで、複雑なレイアウトをスムーズに構築する土台ができたんだ。
2010年代前半：レスポンシブデザインの登場
スマートフォンが急速に普及し、画面サイズの多様化が進む中で生まれたのが「レスポンシブデザイン」だった。デザイナーたちは、どんなデバイスでも美しく表示されるように頭を悩ませていたよ。
最初はメディアクエリを使ってスタイルを切り替えるだけだったけど、その後の進化で、より柔軟なレイアウトが可能になった。でも、実際にやってみると「この画面サイズだけ崩れるんだけど！」という声が絶えなかった。
それでも、この考え方がWebデザインに革命をもたらしたのは間違いない。「ひとつのデザインで、すべてのデバイスに対応する」という理想が、現実のものとなったんだ。
2010年代後半：FlexboxとCSS Gridの普及
FlexboxとCSS Gridが登場したのは、この時代の象徴と言える出来事だったね。それまでデザイナーたちは、浮動要素（float）やインラインブロックといった不完全な手法でレイアウトに挑んでいた。どれも工夫の余地がある手法だったけど、やっぱりどこか限界があったんだ。
この時代、Flexboxがもたらしたのは、親子関係でレイアウトを管理できるという発想だった。横一列に並べたり、均等に間を空けたりするのが、もう特別な手法じゃなくなった。CSS Gridはさらにその上をいく。2次元でレイアウトを組み立てる新しいアプローチは、まるで建築士が地図を描くような感覚だったよね。
ただ、最初はみんな戸惑った。だって、これまでの常識を覆すような書き方だったから。でも、試行錯誤を繰り返すうちに、これこそが理想のレイアウトだ。って気づく人が増えていった。
2020年代：ユニットの多様化とダークモード対応
最近のことになるけど、この時代はCSSの進化がさらに加速しているよね。たとえば、clamp()やmin()、max()みたいな新しい単位が生まれたことで、デザインの柔軟性が大きく広がった。これまではピクセルやパーセントだけに頼っていたけど、いまや動的な値を簡単に計算して指定できるようになったんだ。
そして、忘れちゃいけないのがダークモード。背景を暗くして目に優しいデザインが求められるようになったのも、この時代特有の変化だね。CSSではprefers-color-schemeメディアクエリが登場して、ユーザーの設定に応じたテーマ切り替えが簡単になった。
もちろん、新しい手法に慣れるのには時間がかかるけど、デザイナーたちはこれを武器に、さらに洗練された表現体験をや体験を提供しようと日々挑んでいる。
受け継がれる記憶、形を変える仕組み
長い旅路の果てに、私たちは数えきれないほどの記憶を背負い込む。過ぎ去った時代も、消え去った「仕組み」も、その一つひとつが、今の私たちを形づくる礎となっている。
初めて触れたテーブルレイアウトの世界は、きっと無骨で、不器用で、けれど温かいものだった。レスポンシブデザインの登場に胸を躍らせ、FlexboxやCSS Gridで自由を手に入れたときの歓喜は、今も鮮やかだ。
どんな仕組みも、どんな発想も、やがては役目を終え、記憶の中へと消えていく。それでも、それらが残した足跡は、次の歩みを支える大地となる。そして私たちは、その大地の上をまた一歩ずつ歩んでいくのだろう。
この旅は、決して終わることはない。けれど、だからこそ愛おしい。移りゆく時代の中で、私たちは何度でも、新しい何かを見つけていける。そうして振り返るとき、きっと「過去」が教えてくれるのだ。かつての試みが、どれほどの未来を支えていたのかを。
静かに、けれど確かに。これが「CSSの葬送」であり、また新たな旅の始まり。これからも、共に歩んでいこう。
あとがき
なお、本記事で触れた年代区分は大まかなものであり、技術の普及速度や採用状況には地域差やブラウザごとの対応状況が影響しています。そのため、すべての進化が一律に進行したわけではない点をご了承ください。