ホームページ・ビルダーではじめてのWebページ

サイト内検索  

DOCTYPEスイッチについて

DOCTYPE宣言によって、ブラウザでの表示モードが変わります。これは、CSSレイアウトをするときには非常に重要になります。

DOCTYPEスイッチによる表示モード
DOCTYPE IE7以降 IE6 Gecko系 Opera Safari MacIE5
HTML4.01 Transitional システム識別子なし 互換 互換 互換 互換 互換 互換
HTML4.01 Transitional システム識別子あり 標準 標準 標準 標準 標準 標準
HTML4.01 Strict システム識別子なし 標準 標準 標準 標準 標準 互換
HTML4.01 Strict システム識別子あり 標準 標準 標準 標準 標準 標準
XHTML1.0 XML宣言あり 標準 互換 標準 標準 標準 標準
XHTML1.0 XML宣言なし 標準 標準 標準 標準 標準 標準

Gecko系とあるのはFirefox、Netscape6以上などのレンダリングエンジンにGeckoを使っているブラウザです。なお、Gecko系ブラウザの場合、HTML4.01 Transitonal DTD(システム識別子あり)とXHTML1.0 Transitonal DTDでは「ほぼ標準」モードになります。

HTML4.01でのシステム識別子というのは、"http://www.w3.org/TR/html4/loose.dtd"といった部分です。

Windows版のInternet Explorer 5.xやNetscape4.xにはDOCTYPEスイッチはありません。すべて互換モードで表示されます。

また、DOCTYPEを宣言しなかった場合は、すべて互換モードになります。

標準モードと互換モードの違い

「標準モード」は、Gecko系ブラウザのもつ「ほぼ標準モード」も含めます。

「互換モード」はDOCTYPEスイッチもなかった頃のブラウザとの互換性をとるための表示モードです。主にInternet Explorerをメインに解説します。それは、読者の皆さんがよく使われるのがInternet Explorerだからです。

文字の大きさ
標準モードではmediumですが、互換モードではsmallです。(Operaも)
margin : auto;によるセンタリング
標準モードではセンタリング可能です。互換モードの場合はできません。
ボックスwidthとheightの値
標準モードでは内容部分のみです。互換モードでは、padding、borderの幅も含めてしまいます。(Operaも)

以上の違いは、Gecko系ブラウザで互換モードとなった場合には見られません。すべて標準モードと同じですので、互換モードで表示モードをそろえていても、Firefoxだけ表示が違う!ということに陥ります。

ちなみに、Gecko系ブラウザの「ほぼ標準モード」と「標準モード」の違いは、「Gecko's "Almost Standards" Mode」を参照してください。