HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> スタイルシート(CSS)辞典 >> スタイルシートの基本 >> HTMLのDOCTYPEスイッチとCSS(標準モードと互換モード)

HTMLのDOCTYPEスイッチとCSS(標準モードと互換モード)

DOCTYPE宣言で見た目が大きく異なる

HTMLのDOCTYPE宣言によってCSSの認識や表示の仕方に違いがあります。この点について解説します。なお、以下の文章は本サイトの『HTMLタグ辞典』より文章を引用しています。

汎用性を保たせるためのモード

HTMLの形式が徐々に進化することに並行して、HTMLを装飾(デザイン)するスタイルシート(以下CSS)も変化し続けています。現在のブラウザはCSSの標準に準拠した解釈でページを表示するようになっていますが、ブラウザの種類やHTMLの形式によってその解釈が異なることがあります。これを回避するため、個々のブラウザでは古いHTMLのバージョンで書かれたページも表示できるように、互換モードというものが搭載されています。

現在のブラウザの多くはCSS標準に基づいてページを表示するするようになっています。このCSSの標準に準拠して表示するモードを『標準モード』、一方過去のブラウザでも表示できるようなレイアウトで表示するモードを『互換モード』と呼んでいます。

従って、HTMLだけでなく、スタイルシートも使ってページをデザインするには注意が必要です。

モードの切り替えの判断は…

現在のWEBブラウザでは、この標準モードと互換モードの切り替えの判断を、HTMLのDOCTYPEスイッチ(宣言)によって行っています。DOCTYPE宣言とは、HTMLの冒頭に記述するもので、HTML文書のバージョンを表します。(参考:DOCTYPEスイッチの書き方

参考:DOCTYPE宣言の種類と各ブラウザにおけるモード切替の対応状況

できるだけ標準モードで

互換モードはもともとブラウザで個別に搭載されているものであり、最新のブラウザでは標準モードで書いたページの方がHTMLのDOCTYPEスイッチに従って正確に表示されることが多く、また異なるブラウザで閲覧してもレイアウトが統一されることが多いようです。互換モードを起動させないDOCTYPE宣言文を選択した方が賢明といえます。

ただし、古いブラウザでは標準モードで宣言したページはレイアウトが崩れることもあります。『古いブラウザでは表示されません。』などの記述をしておくと親切なページ作りになります。

また、Javascriptなどを用いてOSやブラウザの種類を判断して個々のスタイルシートに振り分ける方法もあります。

次のページへ >>