【ホームページ作成】DOCTYPE宣言がないとIE7でも表示は古いまま

HTMLの先頭に「DOCTYPE宣言」を記述していますか？
DOCTYPE宣言を省略していると、せっかく最新のInternet Explorer 7で閲覧しても、従来の古いブラウザと同じ表示になってしまいます。

ブラウザには「標準モード」と「互換モード」の2種類の描画モードがある

代表的なブラウザの最新版には、描画モードとして、「標準モード」と「互換モード」という2つのモードが用意されています。 この違いは、次の通りです。

• 「標準モード」 ： できるだけ文法を正しく解釈して表示します。文法ミスがあれば、その記述は無視します。
• 「互換モード」 ： 古いバージョンのブラウザに合わせた表示をします。古いバージョンで誤って解釈していた部分は、誤ったままで表示します。文法ミスがあっても適当に解釈して表示します。

なぜ2つのモードがあるのか？

最近のブラウザは、HTMLやスタイルシートを仕様通りに正しく解釈して表示できるようになってきています。 しかし、昔のブラウザは、仕様とは異なる誤った解釈で表示してしまうことが多くありました。 そのため、ウェブ上には、その「誤った表示」を基準にして作られたページがたくさんできてしまいました。

そのような中、いきなり最新のブラウザで「仕様通りの正しい解釈」を強制的に採用すると、 「誤った表示」を基準にして作られたページの表示がおかしくなってしまう可能性があります。

そのような問題を避けるために用意されたのが、「互換モード」という描画モードです。 このモードでは、過去のブラウザが誤って解釈していた部分は、それと同じように誤った解釈のまま表示します。

モードによって表示が大きく異なる

問題なのは、（特にInternet Explorerの場合で）標準モードと互換モードでは、スタイルシートの解釈が大きく異なる点です。 例えば…

• widthプロパティやheightプロパティによる横幅・高さの解釈が異なる
• 画像と枠線の間に余白が設けられない
• 表のセンタリング方法が異なる
• class名の大文字と小文字を区別しない

…などがあります。

横幅や高さの指定は、細かなレイアウトを実現する上でとても重要です。 この点の解釈が異なるため、「ブラウザによってレイアウトが大きく異なってしまう」原因にもなっています。

Internet Explorer 7の新機能は「互換モード」では無効

最新のInternet Explorer 7（以下、IE7）では、従来は対応していなかった様々な機能（スタイルシートのプロパティなど）が使えるようになりました。 しかし、それは「標準モード」で表示した場合だけの話です。 「互換モード」だと、ほぼ従来のIE6(※)と同様の表示にしかならず、 新しく対応した多くの機能は無効になってしまいます。

※「互換モード」はIE6から導入された機能です。IE6での「互換モード」とは「IE5.5で誤っていた解釈は誤ったまま表示する」という意味です。 IE7の「互換モード」での表示はIE6の「互換モード」での表示とほぼ同じです。 つまり、IE7を使っていても「互換モード」で表示される限りは、 IE5.5と似たような表示になってしまうことになります。

つまり、新しくサポートされた機能（スタイルシートのプロパティなど）を使ったり、仕様書通りの正しい解釈で表示されるようにするためには、 「標準モード」で表示されるようにHTMLを記述する必要があるわけです。

この点を忘れると、いくら最新のIE7を使っても、古いブラウザと同じ表示にしかなりません。

※ここでの「新機能」とは、HTMLやスタイルシートの表示上の機能のことです。「タブが使えるようになった」・「RSSに対応した」・「アルファチャンネルのあるPNG画像が表示できるようになった」などの「ソフトウェアとしての機能」のことではありません。（それらは互換モードでも機能します。）

描画モードは、「DOCTYPE宣言」で決まる

この「標準モード」と「互換モード」の切り替えは、HTMLの1行目にどのような「DOCTYPE宣言」（ドックタイプ宣言）が記述されているかで決まります。
ですから、最新のスタイルシートを正しく使いたい場合には、最新のHTMLを採用して 正しくDOCTYPE宣言を記述しておく必要があります。

※DOCTYPE宣言によるモードの切り替えが行われるのは、Internet Explorerは 6.x以降（Mac版は 5.x以降）、 Netscape Navigatorは 6.x以降（Firefox 1.x以降）です。

それでは、「DOCTYPE宣言」とは何なのか、どうやって記述するのか？…という点について見ていきましょう。

DOCTYPE宣言とは何か？説明と記述方法の紹介へ >>