IE5.5で意図したとおりに表示させるHTML記述の要点
IE5.5は2000年前後にWindows 98やWindows 2000環境で広く使われていたMicrosoft製のWebブラウザです。当時のWeb制作では、レンダリングの違いを考慮した独自の記述ルールが求められました。最新のCSS仕様に沿ったソースを書いても、IE5.5では想定外の表示になるケースが多く、制作者にとっては頭の痛い問題でした。Windows XPが登場する前後までは、企業サイトや公共系のWebページでIE5.5を主要ブラウザと位置づけるケースが多かったことを考えると、現代の感覚で書かれたソースがそのまま動かないのも当然といえば当然です。
本記事では、IE5.5でも見た目を安定させるためのHTML記述のポイントを整理します。DOCTYPE宣言から文字コード、CSSの取り扱い、テーブルレイアウトを補助的に使う手法まで、当時の現場で利用されていた作法を振り返ります。古いブラウザを前提にした記述術を知ることで、現在の仕様の成り立ちを理解する手がかりにもなるはずです。
| 項目 | Quirksモード | Standardsモード (IE5.5) | 後のブラウザ |
|---|---|---|---|
| ボックスモデルの計算 | パディングとボーダーがwidthに含まれる | CSS2仕様に準拠しcontent-box相当 | content-box/box-sizingで明示 |
| :hover擬似クラスの対象 | a要素中心 | a要素のみ安定 | 任意の要素で対応 |
| position: fixed | 機能せず | 動作するが不安定 | 安定して動作 |
| min-height / min-width | 解釈されず | ほぼ無効 | 標準対応 |
| 文字化け対策 | meta charsetがないと高確率で発生 | 明示が必要 | 自動判別もある程度機能 |
DOCTYPE宣言とレンダリングモード
IE5.5の挙動を理解するうえで最も大切なのが、DOCTYPE宣言とそれによって決定されるレンダリングモードの概念です。IE5.5はDOCTYPEの有無や記述内容によって、ボックス幅の計算方法をはじめとする描画ルールを大きく切り替えます。当時のWeb制作者はこの切り替えを意図的にコントロールすることで、表示の崩れを未然に防いでいました。
DOCTYPE宣言がない、もしくはDOCTYPEよりも前にXML宣言やコメント、空白行などがあると「Quirksモード」になり、ボックスの幅にパディングとボーダーが含まれます。これはIE5以前の独自実装に由来する挙動で、Microsoftが後方互換性のために残していた仕組みです。一方、HTML 4.01の厳格なDTDを宣言すると「Standardsモード」となり、CSS2仕様に準拠したボックスモデルで描画されます。見た目をCSS通りに揃えるには、このモードの使い分けが前提でした。
IE5.5で意図したとおりにCSSを効かせたいときは、Standardsモードに切り替えるDOCTYPE宣言を文頭に置き、その前に空白やXML宣言を挟まないことが鉄則でした。実務的には<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">を一行目から書き始めるのが定石です。Transitionalを選んだ場合は要素ごとにレンダリングが微妙に違って見えることがあり、Strictで揃えるほうが混乱が少なかったとされています。
文字コードの宣言
IE5.5は文字コードの自動判別が不得意で、meta要素でのcharset宣言が大きくものをいいます。エンコーディングが正しく認識されないと、いわゆる「文字化け」が発生し、ページ全体が読めない状態に陥ることも珍しくありませんでした。サーバー側のHTTPヘッダーだけを頼りにすると、ファイアーウォールやプロキシ環境では化ける恐れがあり、HTML側にも明示しておく方針が取られていました。
安全策としては、HTMLファイルの保存形式とmeta要素のcharset属性を一致させたうえで、<head>内のできるだけ早い位置に記述します。Shift_JISで保存されたページでは<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">と書くのが一般的で、EUC-JPを用いる場合はcharset属性もそれに合わせる必要がありました。日本語環境で広く使われていたコード体系だけに、エンコーディングの指定ミスはそのままユーザーの離脱に直結します。
UTF-8も利用可能でしたが、当時のIE5.5ではファイルにUTF-8のBOMを付けるほうが安定する場面がありました。テキストエディタに保存機能がない場合は、ファイル冒頭にバイナリでBOMを書き込む必要があり、編集環境の仕様を把握しておく必要がありました。metaタグなしでも動作するブラウザはあるものの、IE5.5をターゲットにするなら明示的な宣言が必須だと考えておいてください。
ボックスモデルの違いとwidth指定
IE5.5のStandardsモードにおけるボックスモデルはCSS2準拠ですが、Quirksモードではパディングとボーダーが要素幅の内側に含まれる独自の計算を行います。width:200pxの要素に左右10pxのパディングを指定した場合、現代のブラウザでは総幅が220pxですが、Quirksモードでは200pxのまま中身が狭くなるわけです。DOCTYPEが誤って解釈されるだけでレイアウトが大きく崩れるため、当時はDOCTYPEの記述ミスが事故の主要原因になっていました。
この違いを避けるにはStandardsモードで動かすことに加え、width指定の意図をはっきりさせる記述が必要です。box-sizingという概念がなく、すべてcontent-box相当で計算されるため、パディング込みで幅を確保したい場合はwidthを内側の値として明示したうえで、別途レイアウトを工夫する流れが一般的でした。たとえば左右にナビゲーションを置く構成では、コンテナに固定値、サブ要素に%指定を振るといった設計がしばしば見られます。
フロートを使った段組みもIE5.5では崩れやすく、いわゆる「3pxジョグ」、「double marginバグ」、「text-alignの継承バグ」など複数の問題が知られていました。これらを回避するには、フロートする要素にdisplay:inlineを併用する、zoom:1でhasLayoutを誘発する、コンテナ側にoverflow:hiddenを付けるといったテクニックを状況に応じて組み合わせます。ハックに頼りすぎない記述のほうが、後年のIE6やIE7へ移行する際にも通用しやすいと言われていました。
利用できない・不安定なCSSと代替手段
IE5.5は当時の水準で見ても対応するCSSプロパティが限られていました。min-heightやmin-width、position:fixed、:focus擬似クラスなど、現在では標準的に使われる機能の多くが使えないか不安定でした。制作者は使いたい機能を直接CSSで書くのではなく、別の手段で代替する発想が求められました。
たとえばposition:fixedは実質的に機能せず、画面下部に固定するナビゲーションを実現するにはJavaScriptでスクロールイベントを監視し、style.topを更新し続ける方式が採られました。min-heightの代替としてはJavaScriptでウィンドウサイズから計算する方法や、固定値でheightを指定しつつ内容が溢れる前提でoverflow:autoを併用する手法が見られます。CSSで完結しないからこそ、スクリプトを併用する前提で設計を組む必要があったわけです。
擬似クラスについても、:hoverはa要素でのみ安定して効き、liやdivなど他の要素には反応しません。CSSだけでロールオーバーを作る場合はa要素を入れ子にしたり、JavaScriptのonmouseoverやonmouseoutで画像を切り替えるといった工夫が必要でした。:focusもa要素以外では不安定で、フォームのユーザビリティを重視する場合はonfocus属性に直接処理を記述するほうが信頼できました。
テーブルレイアウトと画像の扱い
CSSが不安定な分、IE5.5時代にはtable要素によるレイアウトが現実的な選択肢でした。tableとtd、trを入れ子にして段組みを表現し、cellpadding、cellspacing、border属性で間隔を調整する設計は当時の主流です。Strictな意味論から離れますが、複数バージョンのブラウザで見た目を揃えやすく、実装コストが低い利点がありました。
ただし、テーブルレイアウトはリフロー時の挙動が複雑で、画像の読み込みやウィンドウサイズの変更で表示がズレることも珍しくありませんでした。これを抑えるにはtable-layout:fixedを指定してセル幅を明確に固定し、内容量に応じて高さが変化することを前提に設計するやり方が採られていました。表計算ソフトで組んだようなきっちりしたグリッド感を出すには、むしろテーブルが向いていた時代です。
img要素のvertical-alignや周囲の余白についてもIE5.5は独特の処理を行います。テキストの行内に画像を配置すると、画像のベースラインが行のベースラインに揃えられ、結果として画像の下に数ピクセルの隙間が空く現象がよく現れました。これを解消するにはimg要素にdisplay:blockを指定する、行内に置く場合はvertical-align:bottomを併用する、text-alignの影響を受けない親要素に入れるといった対処が有効です。細かい配慮ですが、これを怠るとデザイン全体が「なんとなくズレた」状態に見えてしまいます。
IE5.5向けの作法は現代の開発現場では使う機会がほとんどありませんが、当時の制作者が限られた手段でページを成立させていた知恵は、現在のCSS設計を見直すうえでも参考になります。DOCTYPEの意味、文字コード宣言の重要性、ブラウザ間で挙動が違う前提での組み立て方など、普遍的な原則を含んだ内容です。レガシーブラウザの挙動に興味がある方は、当サイトの関連ページも併せてご覧ください。HTMLの基礎から語り直す記事や、印刷スタイル適用の作法を整理した資料も公開しています。気になる点や、IE5.5用に保管している資料を共有したいという方は、管理人宛てにご連絡ください。