CSSレイアウト[TIPS]
DOCTYPE宣言について
HTML, XHTMLファイルの最上部で、「!DOCTYPE」で始まるタグによる「文書型宣言（document type declaration）」をすることが、W3Cによって推奨されている。
下記はXHTML1.0の場合のDOCTYPE宣言の一例。DOCTYPEには大きく分けると「Strict（厳密な）」「Transitional（移行期）」「Frameset（フレームセット用）」の3つの種類がある。また、HTMLやXHTMLのバージョンによっても分けられる。
最大の注意点は、DOCTYPE宣言の書き方によって、モダンブラウザは「互換モード」「標準準拠モード」に変わること。それぞれのモードによってCSSの解釈の仕方が変わり、見た目に大きく差が出る。
見た目の大きな差については「CSSのボックス構造」>DOCTYPE宣言による表示の違いを参照に。DOCTYPE宣言の構造
DOCTYPE宣言は下のような構造。
この中でもシステム識別子（DTDのURL）は、HTML4.01では無くても表示し、有無によって 「互換モード」「標準準拠モード」の表示の切り換えがブラウザによって変わるため注意が必要。XHTMLではシステム識別子の省略はできない。
DTDとは、Document Type Definitionの略で、W3Cの定義した、HTML文書のマークアップ規則を定めた文書型定義。XML宣言について
ここで、XML宣言についても触れておく。
XML宣言とは、XHTMLの文頭に入っている下記のような1行。
XHTMLはXML文書であるため、「XML宣言」が必要。XHTMLはHTML4.0の仕様をXMLに準拠するように再定義したものであるため。（詳しくは「HTMLの歴史とCSS」を参照に）
ただし、文字コードについては、下記の場合には省略可能なのだそうだ。
●文字コードがUTF-8もしくはUTF-16の場合。
●HTMLなどのプロトコルで文字コードが指定されている場合。
今のところ、この宣言が無くてもほとんどのモダンブラウザが標準準拠モードで表示する。IE6では、XML宣言をすると互換モードになってしまう（下の「表示モード一覧表」を参照）。 このため、個人的には、XML宣言は省略した方が今のところメリットは大きそうだと思う。 IE6ユーザが絶滅し、モダンブラウザでも「XML宣言」が標準になったときには必要だが。
DOCTYPE宣言と表示モード一覧表
くせのあるブラウザの、DOCTYPE宣言による切り換えについてを一覧表まとめたもの。
XML宣言の有無でも切り替わることにも注目。
| 文書型宣言 | XML宣言 | システム 識別子 |
WinIE6 | MacIE5 | Opera7/8 | FireFox | Safari |
|---|---|---|---|---|---|---|---|
| 無 | 必要なし | 無 | 互換 | ||||
| HTML 4.01 Strict | 必要なし | あり | 標準 | ||||
| 無 | 標準 | 互換 | 標準 | ||||
| HTML 4.01 Transitional | 必要なし | あり | 標準 | ほぼ標準 | |||
| 無 | 互換 | ||||||
| HTML 4.01 Frameset | 必要なし | あり | 標準 | ほぼ標準 | |||
| 無 | 互換 | ||||||
| XHTML 1.0 Strict | あり | あり | 互換 | 標準 | |||
| 無 | 標準 | ||||||
| XHTML 1.0 Transitional | あり | あり | 互換 | 標準 | ほぼ標準 | ||
| 無 | 標準 | ||||||
| XHTML 1.0 Frameset | あり | あり | 互換 | 標準 | ほぼ標準 | ||
| 無 | 標準 | ||||||
| XHTML 1.1 | あり | あり | 互換 | 標準 | |||
| 無 | 標準 | ||||||
DTDと、DOCTYPEの3つのタイプ
DOCTYPEには、下記の3つのタイプがある。
「Strict（厳密な）」
HTML上で、W3C非推奨の、見栄えのための要素や属性、フレームが使えない。（⇒全てCSSで表現する）
「Transitional（移行期）」
Strictへの対応ブラウザが出揃うまでの移行期に
使えるように制定したもの。非推奨とされる要素や属性も使用可能。ただしインラインフレーム以外のフレームは使えない。
Transitionalの亜種。フレームが使える。それ以外はTransitionalと同じ。
フレームセットを使うと、ブラウザで「ブックマーク（お気に入り）」にするとき、親ファイルのURLを保存するため、目的のページをダイレクトに記録できず不便。また、うまくページを印刷できないこともある。フレームはユーザの使い勝手のためにも使用しないほうが無難。
モダンブラウザが標準モードになる「DOCTYPE宣言」まとめ
上の「表示モード一覧表」でわかるように、どのブラウザでも標準モードで表示するには、「HTML4.0以上」「システム識別子（DTDのURL）」を記述すること。 「DOCTYPE宣言」そのものが無い場合は互換モードになる。
下記は、モダンブラウザで標準準拠モードになる記述。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
「HTML4.01 Transitional」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
「XHTML1.0 Strict」
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
（注：先頭にXML宣言を入れるとIE6では互換モードになる）
「XHTML1.0 Transitional」
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（注：先頭にXML宣言を入れるとIE6では互換モードになる）
「XHTML1.1」
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
（注：先頭にXML宣言を入れるとIE6では互換モードになる）