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では互換モードになる)