DOCTYPE宣言－CSSレイアウト

DOCTYPE宣言の記述方法とブラウザの動作

スポンサードリンク

DOCTYPE宣言とは？

DOCTYPE宣言とは、ページを構成しているHTML文書（HTMLソース）が、どの仕様・バージョン・文法に従って書かれているかを示す物です。

DOCTYPE宣言の書き方などでによってHTMLにCSSを適用させた時のブラウザでの表示のされ方が変わってしまうことがあります。表示のされ方が変わってしまうのは、DOCTYPE宣言の書き方によってブラウザが標準準拠モードと互換モードという二つの表示モードを切替えて表示する為です。

標準準拠モード

標準準拠モードとは、W3Cの標準仕様にしたがって正しく表示が行われるモードです。IE7（InternetExplorer）の標準準拠モードでの横方向の余白と幅のブラウザでの表示のされ方を例に取り説明していきます。

IE7の標準準拠モードでは、幅（width)を指定すると、文章の範囲などを表示する内容領域となります。余白(padding）を指定すると、内容領域の外側に余白が設置されます。線幅（border)を設定すると、余白（padding）の外側に線が設置されます。

互換モード

互換モードとは、古いバージョンのブラウザとの互換性のある表示をするモードです。IE7（InternetExplorer）の互換モードでの横方向の余白と幅のブラウザでの表示のされ方を例に取り説明していきます。

IE7の互換モードでは、幅（width)を指定すると、内容領域と余白(padding）、線幅（borderの)合計が幅となります。

当サイトでの説明

DOCTYPE宣言の書き方で表示のされ方が違ってしまう為、当サイトのCSSによるレイアウト作成の方法は、標準準拠モードになっていることを前提に説明しますので注意が必要です。

XHTML 1.0 Transitionalの場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

DOCTYPE宣言を上記のように書くことで最近（2008年1月13日）のブラウザでは、標準準拠モードになりますのでコピーして貼り付けて使ってください。