ドキュメントタイプと表示モード
お待たせしました。これからは、このカテゴリーを徐々に攻めていきます。
このカテゴリーは、前回ご紹介した以下のソースをソース単位に解説するシリーズになります。
- http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010
- サンプルページ:http://chaichan.lolipop.jp/src/sright.htm
まずは、解説第一弾で、以下のソースの一行目を解説します。
<!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」に書けない場合もありますし・・・。
実は、このドキュメントタイプは、ブラウザの表示モードを決定します。
表示モードには、以下の2つがあります。
- スタンダードモード(標準モード)(スタンダードは、さらにフルとオルモストに分かれる)
- クワークスモード(互換モード)
大雑把に言うと、「Strict」がスタンダードモード(標準)で、「Transitional」がクワークスモード(互換)になります。
詳しくは以下を参照のこと(引用に問題があればご指摘ください)。
http://www.redout.net/data/dtdmode.html
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">互換 標準 標準
同じCSS(スタイルシート)を指定していても、表示モードにより見た目が異なって表示されるのです。
一番の違いは、ブロックレベル要素のwidthとheightの解釈の違いです。
詳しくは以下のリンクの「ボックスモデル」を参照してください(引用に問題があればご指摘ください)。
http://codezine.jp/article/detail/2479?p=2
- 内容領域(content):テキストや画像などが表示される領域
- パディング(padding):内容とボーダーの間の余白
- ボーダー(border):パディングの外側にある枠線
- マージン(margin):ボックスの最も外側にある、他の要素との余白
要は、クワークスモードでは、本来の長さ(スタンダードモード)にpaddingとborderの長さが加算されてしまうのです。
また、「ユーザのブラウザ」と「HTML文書のドキュメントタイプ」との組み合わせにより、表示モードがスタンダードになったり、クワークスになったり不定なのです。
したがって、段組みレイアウトをするにあたり、スタンダードモードとクワークスモードで同じように表示させるには、paddingとborderをゼロにすればよいわけです。
と言うわけで、段組みレイアウトは、ブラウザとドキュメントタイプに影響されないようにCSSを組んでいきます。
ちなみに、ドキュメントタイプ宣言の記述フォーマットの説明は以下にあります。
関連ページ:
- 解説第二弾:SEOとメタ要素とタイトル要素
http://d.hatena.ne.jp/chaichanPaPa/20090304/1236169917 - 解説第三弾:HTMLマーキングで文章構造化
http://d.hatena.ne.jp/chaichanPaPa/20090306/1236343007 - 解説第四弾:段組みレイアウトの解説
http://d.hatena.ne.jp/chaichanPaPa/20090308/1236483305 - 解説第五弾:CSS詳細部の解説1
http://d.hatena.ne.jp/chaichanPaPa/20090311/1236774374 - 解説第六弾:CSS詳細部の解説2
http://d.hatena.ne.jp/chaichanPaPa/20090312/1236860887
*1:他にFramesetもある