ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。

この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。昔からコーディングしている方は懐かさに浸ったり、そうでない方は現代のウェブの成り立ちに通じる温故知新な情報として参照ください。

テーブルレイアウト / spacer.gif

XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル(Image ReadyやFireworks)から画像を切り出す「スライス機能」と相性のいい方法でした。

<table border="0" cellspacing="0" cellpadding="0" width="760">
  <tr>
    <td colspan="2" width="100%" height="50" valign="top" bgcolor="#3498db">
      ヘッダー
    </td>
  </tr>
  <tr>
    <td width="200" align="center" valign="top" bgcolor="#e67e22">
      サイドバー
    </td>
    <td width="560" valign="top" bgcolor="#2ecc71">
      コンテンツ<br>
      <img src="imgs/spacer.gif" width="1" height="350" />
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#95a5a6">
      フッター
    </td>
  </tr>
</table>

これを当時の最先端のブラウザInternet Explorer 6で表示するとこのように見えます。

最小幅・高さを確保するためにspacer.gifという1px四方の透過GIFファイルを用意し、つっかえ棒としてレイアウト構築に併用します。

<img src="spacer.gif" width="1" height="100%">

▲spacer.gifは単なる画像。スペースを入れるための役割を与えられていた

テーブルレイアウトは表示崩れが少なかったり、覚えることが少ないため、多くのHTMLコーダーに使われていました。ただし、本来は表組みのためのtableタグを使ってデザインすることの矛盾や、spacer.gifのために意味のないimgタグが多数記載されるといった課題がありました。

SEOのブームとともにXHTMLが流行し、HTMLには文章構造だけ、装飾はCSSに分離しようという考え方が普及していきます。やがて、テーブルレイアウトは廃れていきます。メルマガコーディングではテーブルレイアウトの寿命が長かったようですが…

PNGはIE6で透過できない

いまや当たり前のように使われるPNG形式。驚くことにIE6ではPNGは透過できませんでした。例えば透過のあるPNG画像をIE6で表示すると、このような見栄えになります。

これを回避するために、filterプロパティーにIE独自のメソッドを使います。こんな時代からCSS Filterが存在したのですね。

.my-selector {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='透過画像.png',sizingMethod='scale');
  background: none;
}

透過PNGを使うためのJSライブラリ「DD_belatedPNG.js」や、IE用のベクターマックアップ言語「VML」で回避する手法もありました。IE7以上で透過PNGが使えるようになったものの、透明度を扱うopacityプロパティー(厳密にはIEではfilter: alpha(opacity=50))と併用してアニメーションすると汚くなるというバグがあり、根本的な解決はIE9の登場を待つことになります。

角丸は画像で作る

昔は角丸を表現するためには画像で用意するしかありませんでした。画像編集ソフトでスライスで可変部分と固定部分を分割します。

スライスで分割した画像を、divタグを分割したりtableタグで配置します。サンプルとしてdivタグで紹介します。

.btn-left {
  background: url("imgs/btn_left.gif") no-repeat;
  width: 14px; height: 34px;
  float: left;
}
.btn-center {
  background: url("imgs/btn_center.gif") repeat-x;
  height: 34px; line-height: 34px;
  float: left;
}
.btn-right {
  background: url("imgs/btn_right.gif") no-repeat;
  width: 14px; height: 34px;
  float: left;
}
<div class="btn">
  <div class="btn-left"></div>
  <div class="btn-center">ボタン</div>
  <div class="btn-right"></div>
</div>

こうすれば、文言の長さが変わってもボタンが水平方向に伸び縮みします。

ボックスを水平・垂直に可変するためには、画像を9分割してスライスして組み立てます。とにかく面倒でした。border-radiusプロパティーがCSS3で登場し、今はコーディングが圧倒的に楽になりました。

CSSハック

昔はブラウザごとにレンダリング結果が大きく異なっていたため、特定のブラウザでCSSが期待どおりの表示結果にならないことが多かったです。IE6だけデザインが崩れる、Mac IE5.5だけなんとかしたいということが日常茶飯事だったのではないでしょうか。

CSSハックとは、ブラウザが解釈できない記法をあえて使うことで、一部のブラウザにのみCSSを適用させる手法です。「スターハック」や「ホーリーハック」など中二病的なかっこいいネーミングの手法がありましたが、なかには本来のCSSとしてバリッドでない記法もあり、バッドノウハウの塊とも言えるものでした。

/* IE 6とMac IE 5だけに適用するCSSハック */
/* スター(*)を適用するので、「スターハック」 */
* html p {
  color: #f00;
}

/* Mac IEには適用したくない場合に利用する「ホーリーハック」 */
/* \*/
p {
  color: #f00;
}
/* */


/* IE 7のみ適用できるIE 7 スターハック */
*:first-child+html p {
  color: #f00;
}

条件付きコメント

条件付きコメントとはInternet Explorerに対して、コードを隠したりできる条件付きのHTML記法です。Internet Explorer 5で初めて登場し、バージョン9までサポートされていました。ブラウザ分岐しやすいメリットがありました。

<!--[if IE 6]>
<p>あなたはInternet Explorer 6を使用しています。</p>
<![endif]-->
<!--[if !IE]><!-->
<p>あなたはInternet Explorerを使用していません。</p>
<!--<![endif]-->

条件付きコメントを使って、IEのバージョン毎に異なるCSSを読み込ますこともできます。

<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" />
<![endif]-->

先のCSSハックは邪道な方法であるのに対して、条件付きコメントは正攻法として利用できました。

次のページではJavaScriptやfloat時の二倍マージンバグとの思い出を振り返ります。