CSS と DOCTYPE の設定に悩まされた週末

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

いわゆる「ゆるゆるHTML」フォーマットです。
でも互換モードブラウザが表示する形になるため、ブラウザによって見栄えが大きく変わってしまう場合がある。

今後の Web デザインのブラウザ間の統一性を図るためにも、以下参考に変更する方向で。

基本は「Strict」タイプで。
ちなみに「Strict」とは「厳格な」という意味。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

おそらく、意味としては「HTML 4.01 で定義されているタグと属性以外は認めない」でよいかと思います。

そう考えると、HTML 4.01 以降に定義された新しいタグや、ブラウザで独自拡張されたタグは駄目だと思います。

例えば、Flash などのオブジェクトを動作させるための <embed> タグなどは、今となってははどのブラウザでも動くようになっていますが、HTML 4.01 定義では <object> タグを使う必要があります。

それ以外にも、HTML タグとして利用できない要素(タグ名)や属性(タグの続けて記述する付属の設定)があり、それらは CSS に記述するなどの対応が必要です。

あとフレームセットも使えません。詳しくは以下のページ参照。

ただし、この厳格に沿った場合、想定したレイアウトが実現できない場合もあります。

その場合は、適宜以下を使って緩めてく方向で。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

ちなみに XHTML の厳格宣言は以下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">