DOCTYPE宣言

DOCTYPE宣言

<!DOCTYPE HTML PUBLIC "">

ブラウザの表示モード

■DOCTYPE宣言

　DOCTYPE宣言とは、そのページを作成したHTMLファイルのバージョン（仕様）をブラウザに伝えるためのもので、タグではありません。

　HTML4.01では必須とされています。HTML4.01に準拠したページを作成する場合、このDOCTYPEの宣言を行う必要があります。

このDOCTYPE宣言は、ページの一番最初（<html>タグの前）に記述します。

　DOCTYPE宣言は、次の３タイプがあります。それぞれ、「URLを含めた指定」と「URLを省いた指定」があり、全部で６通りの指定方法になります。

※ URLを含めた指定について
Webサーバー言語がLINUXの場合や WebサーバーがUNIXマシーンの場合、URLを省略すると表示ミスを起こす事があります。出来るだけURLを含めた指定にして下さい。

【HTML4.01】

1) Strict … HTML4.01のルールに厳密に従う指定（フレームは不可）
　非推奨のタグ（要素）や属性は使うことができず、要素の配置に関しても細かい決まりがあります。また、フレームも使用できません。

◇URLを含めた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

◆URLを省いた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

※ DOCTYPE宣言が Strict の場合は、リンクタグ（<a>）の target属性（表示ウィンドウ（フレーム）の指定）を使用できません。

2) Transitional … Strictより緩やかな指定（フレームは不可）
　非推奨のタグ（要素）や属性を使用できますが、フレームは使用できません。

◇URLを含めた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

◆URLを省いた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

3) Frameset … Transitionalにフレームを加えた指定
　Transitionalに加え、フレームを使用できるようにした指定です。フレームを設定する文書では、このDOCTYPE宣言を記述します。

◇URLを含めた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

◆URLを省いた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

　一般的なブラウザには、「標準モード」と「互換モード」の2つの表示モードが備わっています。

■標準モード：文法を正しく解釈する表示モードです。文法ミスは無視されます。

■互換モード：過去のバージョンと互換性のある表示モードです。文法ミスはある程度許容され、ブラウザがうまくカバーして表示してくれます。

関連するページ

HTML タグページ

：ページの基本タグ
HTML タグページ

：リンク先ページの表示ウィンドウを指定する
HTML タグページ

：相対リンクの基準となるページを指定する
HTML タグページ

：フレームを使用したときのリンクの指定方法
HTML タグページ

：インラインフレームを使用したときのリンクの指定方法
HTML タグページ

：送信結果を表示するウィンドウの指定

DOCTYPE宣言

■ブラウザの表示モード（標準モードと互換モード）

　標準モードと互換モードでは、ブラウザの解釈の違いにより、表示のされ方も多少違います。この表示モードは、DOCTYPE宣言の記述に URL(URI) を含めるかどうかによって、自動的に切り替わる仕組みになっています。
　Internet Exp.、Firefox、Opera の場合の表示モードの切り替わり方は次通りです。

DOCTYPE宣言	URI	表示モード
Strict	有り	標準モード
Strict	無し
Transitional	有り
Transitional	無し	互換モード

　この表示モードの違いは、スタイルシートの解釈にも影響を及ぼすケースがあります。
　以下の項目では、デザインに影響を及ぼすと思われる代表的な「解釈の違い」をご紹介します。

　【ボックスのサイズ】

　ボックスのサイズ（width、height）を指定する場合、標準モードと互換モードでは次のような解釈の違いがあります。

※ この解釈の違いは、Internet Exp.で発生します。Firefox と Opera 等では、どちらのモードでも「標準モード」の解釈となります。

表示モード	ブラウザの表示	実　例（width:100px と padding:10px を指定）
標準モード	width と height で指定するサイズには、境界線やパディングを含みません。	ボックス全体の幅は 120px になります。
互換モード	width と height で指定するサイズには、境界線やパディングを含みます。	ボックス全体の幅は 100px になります。

※ 標準モードでは、width:100px に左側と右側の両サイドに padding:10px が加わるので、ボックス全体の幅が 120px になります。

　【ブロックレベル要素のセンタリング】

　ブロックレベル要素をセンタリングする場合、標準モードと互換モードでは次のような解釈の違いがあります。

※ この解釈の違いは、Internet Exp.で発生します。Firefox と Opera 等では、どちらのモードでも「標準モード」の解釈となります。

表示モード	ブラウザの表示
標準モード	左右のマージンに auto を指定するとセンタリングされます。＊同時にボックスの幅を指定する必要があります。
互換モード	左右のマージンに auto を指定するとセンタリングされません。

※ 互換モードでセンタリングさせたい場合は、親ボックスに text-align:center を指定します。

　【フォントサイズ】

　フォントサイズを数値ではなくキーワードで指定する場合、標準モードと互換モードでは次のような解釈の違いがあります。

※ この解釈の違いは、Internet Exp. と Opera で発生します。Firefox 等では、どちらのモードでも「標準モード」の解釈となります。

表示モード	ブラウザの表示
標準モード	medium が標準の文字サイズと一致します。
互換モード	small が標準の文字サイズと一致します。

※ 「標準の文字サイズ」とは、特にフォントサイズを指定しなかった時に表示する文字の大きさです。

　使用できるキーワードは、次の通りです。

xx-large	x-large	large	medium	small	x-small	xx-small
一番大きな文字	―	―	「標準ﾓｰﾄﾞ」の標準文字ｻｲｽﾞ	「互換ﾓｰﾄﾞ」の標準文字ｻｲｽﾞ	―	一番小さな文字

※ 「標準文字ｻｲｽﾞ」とは、特にフォントサイズを指定しなかった時に表示する文字の大きさです。

※ 「互換モード」でブラウザに表示する文字サイズは、「標準モード」に比べ一回り大きいサイズで表示されます。表示文字のサンプルをご覧下さい。