小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

ドキュメントタイプと表示モード

CSSレイアウト

お待たせしました。これからは、このカテゴリーを徐々に攻めていきます。
このカテゴリーは、前回ご紹介した以下のソースをソース単位に解説するシリーズになります。

まずは、解説第一弾で、以下のソースの一行目を解説します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

これは、ドキュメントタイプ宣言と言います。
HTML文書の一行目には、必ずこのドキュメントタイプ宣言が必要です。
ドキュメントタイプ宣言には、大きく分けて「Strict」と「Transitional」*1があります。
今回は、「Transitional」としました。
理由は、「Strict」にしてHTMLを間違えるより、「Transitional」にして正しいHTMLを書こうと心がける方が良いと思ったからです。
また、アフィリエイトの関係で「Strict」に書けない場合もありますし･･･。


実は､このドキュメントタイプは、ブラウザの表示モードを決定します。
表示モードには、以下の２つがあります。

  • スタンダードモード（標準モード）（スタンダードは、さらにフルとオルモストに分かれる）
  • クワークスモード（互換モード）

大雑把に言うと、「Strict」がスタンダードモード（標準）で、「Transitional」がクワークスモード（互換）になります。
詳しくは以下を参照のこと（引用に問題があればご指摘ください）。

HTML ver DTD IE6 N6.2 IE5(Mac)
なし なし 互換 互換 互換
HTML3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 互換 互換 互換
HTML4.0 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 標準 標準 標準
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html/40/strict.dtd"> 標準 標準 標準
HTML4.0 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 互換 互換 互換
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html/40/loose.dtd"> 標準 互換 標準
HTML4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 標準 標準 互換
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 標準 標準 標準
HTML4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 互換 互換 互換
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 標準 標準 標準
XHTML1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 標準 標準 標準
<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">		 互換 標準 標準
XHTML1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 標準 標準 標準
<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">		 互換 標準 標準
XHTML1.1 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 標準 標準 標準
<?xml version="1.0" encoding="Shift_JIS"?>

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

http://www.redout.net/data/dtdmode.html

同じCSS（スタイルシート）を指定していても、表示モードにより見た目が異なって表示されるのです。
一番の違いは、ブロックレベル要素のwidthとheightの解釈の違いです。
詳しくは以下のリンクの「ボックスモデル」を参照してください（引用に問題があればご指摘ください）。

  • 内容領域（content）：テキストや画像などが表示される領域
  • パディング（padding）：内容とボーダーの間の余白
  • ボーダー（border）：パディングの外側にある枠線
  • マージン（margin）：ボックスの最も外側にある、他の要素との余白
http://codezine.jp/article/detail/2479?p=2

要は、クワークスモードでは、本来の長さ（スタンダードモード）にpaddingとborderの長さが加算されてしまうのです。


また、「ユーザのブラウザ」と「HTML文書のドキュメントタイプ」との組み合わせにより、表示モードがスタンダードになったり、クワークスになったり不定なのです。


したがって、段組みレイアウトをするにあたり、スタンダードモードとクワークスモードで同じように表示させるには、paddingとborderをゼロにすればよいわけです。


と言うわけで、段組みレイアウトは、ブラウザとドキュメントタイプに影響されないようにCSSを組んでいきます。


ちなみに、ドキュメントタイプ宣言の記述フォーマットの説明は以下にあります。

関連ページ：

*1:他にFramesetもある