JavaScript Diary

DOCTYPE宣言 [ 2001/09/23 ]

掲示板でも書きましたが、最近のブラウザはDOCTYPE宣言によって表示の仕方を自動で切り替えます。
以下は Web Designing [ vol.2 ] のものを一部手を加えて転載しています。

その機能を搭載したブラウザは Netscape6Mac版IE5Windows版のIE6 です。これらのブラウザは2つの表示モードを有しています。
一つはW3Cの標準的な仕様に準拠したモード、もう一つはこれまでのWebブラウザの表示方法と互換性を持たせたモードです。
HTMLのバージョンのほか、DTDのURLを指定するかどうかによってもどちらかのモードになるかが異なるので注意が必要です。

では、そのモードによってどのくらい変わるのか、先ずは実際の例を見てみましょう。
DOCTYPE宣言による表示の確認
このページを Windows版IE5、または Mac版IE4 で見た後、Netscape6 で見てみて下さい。
確認できない方は僕の環境で Windows版IE5(互換モードの例)Netscape6(標準モードの例) で見た結果を画像として置いておきます。
これは間違いなく同じHTMLファイルですが、見た目はこうも変わってしまいます。

では、次にどのようなDOCTYPE宣言を指定したときに標準モードと互換モードを切り替えるのか表にしてみました。

DOCTYPE宣言による表示モードの関係
DOCTYPE宣言Netscape 6IE 6Mac版IE 5
なし互換モード互換モード互換モード
HTML 2.0互換モード互換モード互換モード
HTML 3.2互換モード互換モード互換モード
HTML 4.0 Strict(URLなし)標準モード標準モード標準モード
HTML 4.0 Strict(URLあり)標準モード標準モード標準モード
HTML 4.0 Transitional(URLなし)互換モード互換モード互換モード
HTML 4.0 Transitional(URLあり)互換モード標準モード標準モード
HTML 4.01 Strict(URLなし)標準モード標準モード互換モード
HTML 4.01 Strict(URLあり)標準モード標準モード標準モード
HTML 4.01 Transitional(URLなし)互換モード互換モード互換モード
HTML 4.01 Transitional(URLあり)標準モード標準モード標準モード
XHTML 1.0 Strict(URLなし)標準モード互換/標準標準モード
XHTML 1.0 Strict(URLあり)標準モード互換/標準標準モード
XHTML 1.0 Transitional(URLなし)標準モード互換/標準標準モード
XHTML 1.0 Transitional(URLあり)標準モード互換/標準標準モード
XML宣言があると「互換モード」、ないと「標準モード」になります。

標準モードと互換モードの違いも表にまとめましたので参考にして下さい。

モードによる主な表示の違い
 CSSソース例Netscape 6IE 6Mac版IE 5
標準
モード
互換モード標準
モード
互換モード標準
モード
互換モード
#をつけない色指定color: ff0000無視#ff0000として表示無視#ff0000として表示無視#ff0000として表示
数値に単位がない場合margin-left: 100無視100pxとして表示無視100pxとして表示無視100pxとして表示
数値と単位の間にスペースがある場合margin-left: 100 px無視無視無視100pxとして表示無視100pxとして表示
キーワードを「"〜"」で囲った場合text-align: "center"無視無視無視centerとして表示無視centerとして表示
text-alignで、ブロックレベルの要素をセンタリングするかtext-align: centerしないしないするするしないする
margin: autoで、ブロックレベル要素をセンタリングするかmargin: autoするするするしないするする
ブラウザ標準の文字サイズは「medium」と同じかfont-size: medium同じ同じ同じsmallと同じ同じsmallと同じ
widthとheightは、内容領域の幅と高さになっているかwidth: 100px正常正常正常paddingとborderも含む正常paddingとborderも含む
img要素のpaddingをサポートしているかpadding: 50pxサポートサポートサポート未サポートサポートサポート

うぅ〜今まで padding が思い通りにならないのも、センタリングされないのもこれのためか、と思いつつ・・・
Transitional に慣れ切ってしまっている僕にはこの仕様はなかなかもって辛いです。

最後にDOCTYPE宣言の例を書いておきます。

■ HTML 4.01 Strict(URLなし)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
■ HTML 4.01 Strict(URLあり)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
■ HTML 4.01 Transitional(URLなし)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
■ HTML 4.01 Transitional(URLあり)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

それにしても「いかにも過渡期」って感じですよね。