ホームページ作成/HTML・スタイルシート(CSS)の基礎

DOCTYPE宣言がないとIE7でも表示は古いまま(3ページ目)

HTMLの先頭にDOCTYPE宣言がありますか? ないと、Internet Explorerでスタイルシートを活用できません。最新のIE7でもこの宣言がなければ以前と同じ表示になってしまいます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

DOCTYPE宣言を書く

DOCTYPE宣言は長い文字列ですが、書く内容は決まっていますので、まるまるコピー&ペーストしてしまえば問題ありません。

自分が記述したいHTMLのバージョンが分かっている場合は、そのバージョンに対するDOCTYPE宣言を書きます。 分からない場合は、とりあえず「 HTML 4.01 Transitional 」のDOCTYPE宣言を書いておけば良いでしょう。

以下のDOCTYPE宣言は、どのブラウザでも「標準モード」として解釈されます。

●HTML 4.01 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

「HTML 4.01 Strict」は、HTML4.01で定義されている要素や属性のうち、利用しないことが望ましいとされている「非推奨」な要素や属性を一切使わないで記述したHTMLであることを示すDOCTYPE宣言です。 このDOCTYPE宣言を書いた場合は、b要素(<b>~</b>)で太字にしたり、font要素で文字サイズや色を指定することはできません。(それらの装飾にはスタイルシートのみを使います。)

※システム識別子(後半のURL)を省略すると、Mac版IEでは「互換モード」になってしまいます。

●HTML 4.01 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

「よく分からないけど標準モードで描画させたい」場合は、とりあえずこのDOCTYPE宣言を書いておきましょう。
「HTML 4.01 Transitional」は、HTML4.01で定義されている要素や属性のうち、「非推奨」となっているものも含めて利用しているHTMLであることを示すDOCTYPE宣言です。 (望ましくはありませんが、b要素で太字にしたり、font要素で文字サイズを変更しても、文法違反にはなりません。)

※システム識別子(後半のURL)を省略すると、どのブラウザでも「互換モード」になってしまいます。省略せずに全部書いて下さい。

●XHTML 1.0~1.1

XHTMLのDOCTYPE宣言なら、どのバージョンでも標準モードで描画されます。以下は、XHTML 1.1の場合のDOCTYPE宣言です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTMLを使う場合は、DOCTYPE宣言の前にXML宣言が必要です。しかし、それを書いてしまうとIE6は「互換モード」でしか表示しなくなる問題があります。 詳しくは、「補足:XHTMLを使う場合の注意点」をご参照下さい。 (XHTML1.1以外のDOCTYPE宣言についても、この補足ページで紹介しています。)

※XHTMLでは、システム識別子(後半のURL部分)は省略できません。
※XHTML 1.0 のDOCTYPE宣言でも「標準モード」で表示されます。

●そのほか

HTML 4.01 の1つ前のバージョンである HTML 4.0 用のDOCTYPE宣言では、「Strict」の場合ならどのブラウザも「標準モード」で表示します。 「Transitional」の場合は、どう書いてもどのブラウザも「互換モード」で表示します。
HTML 4.01ではなく、HTML 4.0を使って記述する必要はないと思いますので、HTML 4.01のDOCTYPE宣言を使っておきましょう。

おわりに

今回ご紹介してきたように、DOCTYPE宣言を書かないと、(IE7であっても)最新のスタイルシートなどが表示に反映されません。 特にこれから新しくHTMLを書く場合は、(「標準モード」として解釈される)DOCTYPE宣言を忘れずに書いておくようにしましょう。

【関連記事】


  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます