Web実装技術の歴史と変遷【前編】：黎明期からCSSの誕生、第一次ブラウザ戦争まで

2017年ごろからWeb業界に携わり始めましたが、そこから今に至るまで、技術の変遷はとてつもないスピードで進んできたように感じます。

ES6（ECMAScript 2015）やTypeScriptの台頭、フレームワークやバンドルツールの多様化など、覚えるべき技術は星の数ほど増えました。

そんな周辺技術が急速に発展・増加していく中で、Webサイト制作の根幹となるHTMLやCSSの現在のスタンダードはどうなっているのか。

原点に立ち返り、改めて歴史とともに調べてみることにしました。

ウェブ標準技術の成熟と始まり

遡ること30数年。 1989年にティム・バーナーズ＝リーによって提案されたWorld Wide Web（WWW）から、ハイパーテキストという思想が提唱されました。

その思想に基づき、1991年ごろに最初のHTMLが誕生します。

History of the Web https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

この時代を直接体験したわけではありませんが、当時利用可能なタグは、見出し（<h1>〜<h6>）、段落（<p>）、リスト（<ul>, <ol>, <li>）、そして最も重要なリンク（<a>）など、最低限の構造を定義するタグに限られていたそうです。

下記のようなコードですね。

HTML

<title>The World Wide Web project</title>
<h1>World Wide Web</h1>
The WorldWideWeb (W3) is a wide-area<a name=0 href="http://...">hypermedia</a> information retrieval initiative...
<ul>
<li><a href="http://...">What's out there?</a>
<li><a href="http://...">Help</a>
</ul>

<head>や<body>といったタグすらなく、リンクとリストだけの極めてシンプルな構造であることが分かります。

今では考えられませんが、CSSも存在しない時代。
ごくごくシンプルに「情報を伝達するため」だけにHTMLが用いられていました。

デザインへの誘惑

しかし、人間には欲が出てくるもので、情報が集まるとそれを整理し、装飾したくなるのが道理です。

「やはり視覚的に見やすい方がいいだろう」ということで、HTMLの思想が学術界から一般社会に広がるにつれ、字下げや文字サイズ、色の変更などが直接HTMLタグで行われるようになりました。

HTML

<center>
  <font size="5" color="red">
    <b>最新ニュース！</b>
  </font>
</center>

本来のHTMLの基本構想（セマンティクス＝文書構造）からすると誤用と言えますが、当時はこれが見栄えを整えるための最適な手段でした。

第一次ブラウザ戦争

時が1990年代中後半に移ると、Netscape NavigatorとInternet Explorer (IE) が市場シェアを激しく争う時代が到来します。

独自拡張タグの乱立と、レイアウト技術の「ハック」化が進んだ混沌の時代であると同時に、CSSという希望が生まれた時代でもあります。

HTML

<blink>チカチカする文字</blink>
<marquee>右から左へ流れる文字</marquee>

独自タグの乱立

この頃、ブラウザベンダー各社は他社との差別化を図るため、標準仕様を無視した独自のHTMLタグを次々と実装します。

その結果、<blink>や<marquee>のような、特定のブラウザでしか機能しないタグが量産され、ブラウザごとで見た目に差が出てしまう要素が多用されました。

もはや収拾のつかない事態となったため、事態を収束させるべくW3C（World Wide Web Consortium）が1997年にHTML3.2を勧告。

HTML 3.2 Reference Specification https://www.w3.org/TR/2018/SPSD-html32-20180315/

これは当時のブラウザで広く実装されていた機能を「追認」する形での標準化となり、

テーブル、アプレット、テキストの回り込みなどの機能が含まれていましたが、「構造と表現の分離」という理想からは程遠い、妥協の産物でもありました。

テーブルレイアウト全盛期とSpacer GIFの功罪

そんな群雄割拠な時代に、レイアウトを組み上げるノウハウも不完全に形を整えていきます。

当時まだfloatやflex、gridといった便利なレイアウト用のスタイル手法はありませんでした。
そこで、レイアウト制御をするために利用されたのが、なんと<table>タグです。

<table>タグを外枠に、<td>を一つのセル（枠）とみなして、Excelの方眼紙のようにブロックを積み上げていくことで段組みレイアウトを実現していました。

痒いところに手が届く？Spacer GIFの活用

しかし、当時のテーブルレイアウトの手法だけでは、余白を広げるなどの細かい微調整が困難でした。

そこで誕生したのが、Spacer GIF（スペーサーGIF）という手法です。

1px × 1pxの極小の透明なGIF画像を無理やりセル内に配置し、画像のwidthやheightを指定することで余白を広げるという力技です。（他に方法はなかったのでしょうかね……）

HTML

<table border="0" cellpadding="0" cellspacing="0" width="800">
  <tr>
    <td width="200" valign="top">メニュー</td>
    <td><img src="spacer.gif" width="50" height="1"></td>
    <td width="550">本文がここに入ります。</td>
  </tr>
</table>

とにかくこれでセル間の余白を実装することはできましたが、見えない画像の乱立はHTMLソースの肥大化や読み込み速度の低下を招き、アクセシビリティも著しく損なう粗悪な構成となってしまいました。

CSSの誕生

そんな混沌の中に現れた希望、それがCSS（Cascading Style Sheets）です。 HTML3.2の勧告とほぼ同時期の1996年、W3CによってCSS1が勧告されました。

余談ですが、下記はCSSの誕生から発展までを記したヒストリーサイトです。

CSSの提唱者であるHåkon Wium LieとBert Bosによる回顧録的な側面もあり、なかなかに興味深い内容です。1994年の最初の提案から、ブラウザ戦争の中での標準化の苦労など、時系列でまとめられていますので、時間があれば読んでみてください。

A brief history of CSS until 2016 https://www.w3.org/Style/CSS20/history.html

さて、本題に戻ります。

CSSの登場により、フォント、色、背景、余白（margin/padding）の基本的な制御が可能になりました。
しかし、ここでも「ブラウザの独自仕様」が壁となります。

同じCSSを記述しても、ブラウザごとに解釈が異なり、スタイルが崩れる現象が多発しました。

当時はこれが顕著で、paddingやwidthの計算方法（ボックスモデル）すら統一されていない始末でした。結局、独自仕様を用いるブラウザの挙動に合わせるため、エンジニアはCSSハックを強要されることになります。

CSS

.content {
  width: 400px; /* IE5.5用 */
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 300px; /* 標準準拠ブラウザ用 */
}

混沌とした時代でしたね。

ここから2000年代に入り、Web標準化運動が活発化する時代へと突入していくのですが、少し長くなりそうなので続きは次回の記事で解説します。

それでは、また次回。