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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

DOCTYPE宣言って何?

HTMLの1行目に記述する以下のような記述のことを、DOCTYPE宣言(ドックタイプ宣言)といいます。

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

そのHTMLが、どんなバージョンのHTMLで記述されているのかを示すために使われます。

HTMLには複数のバージョンが存在します。最新のHTMLは 4.01 (※)です。 バージョンによって、定義されている要素の種類や仕様などが異なります。 ですから、文法を正しく解釈するためには、「どのバージョンのHTMLで書かれたものなのか」を示す必要があります。 そのために、DOCTYPE宣言が使われます。
※HTML4.01の後継はXHTMLです。XHTMLの最新版は 1.1 です。

上記の例では、「 HTML 4.01 Transitional 」を使って記述していることを示しています。(詳しくは後述)

何か難しそう?

DOCTYPE宣言は長いので、なにやら難しそうに思えるかも知れません。 しかし、心配する必要はありません。 書く内容は決まっているので、自分の使っている(使いたい)HTMLのバージョンさえ分かれば、 それに対応するDOCTYPE宣言をコピー&ペーストするだけで大丈夫です。

「HTMLのバージョンって何?」…という場合は、とりあえず「 HTML 4.01 Transitional 」だと仮定して書けば良いでしょう。 最近のHTML本を読んで書いたのなら、だいたいそうです。 (それに、ブラウザが「標準モード」であると解釈してくれるDOCTYPE宣言が書ければ、とりあえずここでは問題ありませんから。)

HTMLの先頭に挿入すれば良いだけ
DOCTYPE宣言は、とりあえずコピー&ペーストするだけでも大丈夫。

DOCTYPE宣言と描画モードの関係

「標準モード」で描画するか「互換モード」で描画するかの切り替えは、どのような「DOCTYPE宣言」が記述されているかで決まります。 この判別は、だいたい以下のようになっています。

■標準モードとして解釈される場合:

  • 誤りなく、省略なく、HTML 4.01以上(※1)のバージョンのDOCTYPE宣言を書いた場合

■互換モードとして解釈される場合:

  • DOCTYPE宣言を書いていない場合
  • DOCTYPE宣言を書いているものの、HTMLのバージョンが古い場合
  • HTML 4.01以上(※1)のDOCTYPE宣言だが一部が省略されている場合(※2)
  • DOCTYPE宣言のスペルが間違っている場合
  • その他

要するに、HTML4.01以上のバージョンであることを示すDOCTYPE宣言を、誤りなく省略もせず書いた場合のみ、「標準モード」で描画されるわけです。 それ以外は、すべて(※2)「互換モード」で描画されます。

※1:HTMLの最新版は 4.01 であり、これ以上のバージョンは作らないことになっています。後継は XHTML です。 ですから「HTML4.01以上」とは、ここでは「HTML4.01 か XHTML1.0以上」ということです。(なお、HTML 4.0でも「Strict」なら標準モードで描画されます。詳しくは後述。)
※2:ブラウザによっては、DOCTYPE宣言の一部(後半の「システム識別子」と呼ばれる部分)を省略しても「標準モード」として解釈される場合があります。しかし、どんなブラウザにも標準モードとして解釈させるためには、省略しないで書いておく必要があります。

なお、HTMLではなくXHTMLを使っている場合には、注意しなければならない点が1つあります。 詳しくは、「補足:XHTMLを使う場合の注意点」に書いておきましたのでご参照下さい。 (HTMLしか使っていないなら読まなくて構いません。)

それでは、DOCTYPE宣言を書いてみましょう。

DOCTYPE宣言を書いてみる >>

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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