前回の記事では、1990年代のブラウザ戦争による独自タグの乱立や、テーブルレイアウト、Spacer GIFといった「力技」でWebサイトが作られていた混沌の時代を振り返りました。

今回はその続き、2000年代の「Web標準化運動」の幕開けから、現在のモダンWebにおけるHTML/CSSのスタンダードに至るまでの歴史を紐解いていきます。

構造と表現の分離：HTML4.01とXHTMLの時代

2000年代に入ると、「ブラウザごとに書き分けるのはもう限界だ」「本来のセマンティクス（文書構造）を取り戻そう」という動きが本格化します。そこでW3Cが強く推進したのが、**Web標準（Web Standards）**に準拠したコーディングでした。

その大きな転換点となったのが、1999年に勧告されたHTML 4.01です（一応HTML 4.0というのがありますが、主流になったのはHTML 4.01）。 このバージョンでは、多用されていた<font>や<center>といった「見栄えを変えるためだけのタグ」が明確に非推奨とされました。「構造（文書）はHTMLで書き、装飾（デザイン）はCSSで行う」という、現在のWeb制作の基本原則がここでようやく確立されたのです。

さらに、このHTML 4.01をベースとしつつ、より厳密にXMLのルールを取り入れたXHTML 1.0が2000年に登場し、Web業界に広く普及していきます。

これまでルーズだったHTMLの記述作法が一気に厳格化され、よりプログラム的に処理しやすい美しいコードが求められるようになりました。

• タグは必ず小文字で書く
• 属性値はダブルクォーテーションで囲む
• <br />のように終了タグを省略しない

ちょうど私が技術を学び始めた2013年頃も主流技術として利用されており、2014年にHTML5が誕生するまで長く扱われていました。懐かしいですね。 当時は今ほど技術も多様化していなかったので、もっとシンプルな世界だったように思えます。

Floatレイアウトと「Clearfix」の呪縛

そしてコンテンツの配置技術もこのタイミングで進歩を遂げます。 テーブルの代わりにレイアウトの主役となったのが、CSSのfloatプロパティ。

本来は「テキストを画像に回り込ませる」ためのプロパティを、ブロック要素を横並びにする段組みレイアウトとして流用したのです。

しかし、floatは親要素の高さを認識できなくなるという厄介な仕様がありました。 これを解決するために生み出されたのが、世界中のコーダーがお世話になったであろう**Clearfix（クリアフィックス）**というCSSハックです。

CSS

/* 一世を風靡した clearfix */
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

擬似要素を使って見えないブロックを作り、強引に回り込みを解除するこの手法は、当時のスタイルシートには必ずと言っていいほど記述されていました。今見ると、これもまた一つの「ハック」だったと言えますね。

スマートフォンの誕生とHTML5/CSS3の革命

2007年、iPhoneの登場によりWebの世界は劇的な変化を迎えます。 「PC向けの固定幅サイト」だけでなく、「手のひらサイズの画面」でも快適に閲覧できる仕組みが必要になったのです。

ここで爆発的に普及したのがレスポンシブWebデザインと、それを支えるCSS3の「Media Queries（メディアクエリ）」です。画面幅に応じてCSSを切り替えるという、現在では当たり前のアプローチが確立されました。

さらに、角丸（border-radius）や影（box-shadow）、グラデーションがCSSだけで描画できるようになり、「Photoshopで画像をスライスして背景に敷き詰める」というコーダーの苦労が大きく軽減されます。

「たったの数行でここまで見た目の制御ができるようになったのか。」

と、当時は衝撃を受けましたね。

同時に勧告へ向けて進んでいたHTML5では、<header>、<footer>、<article>、<section>といったセマンティックなタグが追加され、文書構造はかつてないほど明確になりました。また、Flashなどのプラグインに依存せず、ブラウザ標準で動画再生や複雑な描画（Canvas）が可能になったのもこの時期です。

レイアウトの民主化：FlexboxとCSS Grid

2010年代半ばになると、長らくレイアウトの主役だったfloatがようやくその役目を終えます。 レイアウトを組むために「設計された」待望のCSSモジュール、FlexboxとCSS Gridの登場です。

CSS

/* Flexboxによるシンプルな横並びと中央揃え */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

かつて1pxの透明GIFを敷き詰めたり、マイナスマージンを駆使して要素を中央揃えにしていた時代からすると、涙が出るほど直感的で強力な機能です。これにより、複雑なUIデザインも堅牢かつシンプルに実装できるようになりました。

終わりなき進化「Living Standard」と現代のWeb

長年、Webの標準仕様はW3Cがバージョン（HTML4、HTML5など）を策定してきましたが、Web技術のあまりの進化の速さに追いついていけなくなりました。

そこで現在、HTMLやDOMの仕様は、Apple、Google、Mozilla、Microsoftなどのブラウザベンダーが主導するWHATWG（Web Hypertext Application Technology Working Group）によって管理される**「HTML Living Standard」**へと移行しました。 バージョンという概念は撤廃され、日々継続的に仕様が更新・追記されていく形になったのです。

現在はReactやVue.jsといったJavaScriptフレームワーク全盛の時代です。 開発の現場では、コンポーネント指向でUIを構築し、TypeScriptで堅牢にロジックを書くことが当たり前になりました。

しかし、どれほど周辺技術やフレームワークが高度化しても、最終的にブラウザが解釈してユーザーの画面に描画しているのは、HTMLとCSSです。

30年前に学術文書のリンクから始まり、独自拡張の混沌とハックの歴史を乗り越え、洗練された「Living Standard」へと辿り着いたWeb標準技術。 フレームワークの学習に追われる日々の中で、たまにはこうして出力の根幹であるHTML/CSSの歴史と進化に思いを馳せてみるのも、大切な時間ですね。

ではでは。