燈明日記 このページをアンテナに追加 RSSフィード

ごあいさつ

燈明日記へようこそ!!

燈明日記の主なテーマは、以下の通りです。

そして、燈明日記へ来られたのも『私』と『あなた』の何かのご縁です。なので、どうぞごゆっくりご覧下さい!


2009/3/3(火)

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

お待たせしました。これからは、このカテゴリーを徐々に攻めていきます。

このカテゴリーは、前回ご紹介した以下のソースをソース単位に解説するシリーズになります。

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

<!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」がクワークスモード(互換)になります。

詳しくは以下を参照のこと(引用に問題があればご指摘ください)。

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もある

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証