HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / HTMLの基本 / DOCTYPEスイッチ

★HTMLの基本

| ​​DOCTYPEスイッチ

表示モードの切り替え

比較的新しいブラウザには、HTMLやCSSの記述をどのように画面表示するかを決めるレンダリングモードが、 大きく分けて２種類備わっています。 レンダリングモードとは、ウェブページの表示方法を決めるブラウザの状態のことで、 DOCTYPE宣言の記述のしかたによって切り替わります。
標準モード（Standard）は、CSSなどの指定を仕様通りに解釈して表示するモードで、 互換モード（Quirks）は、まだCSSが普及していなかった時代の過去のブラウザとの互換のために、 あえて標準仕様とは異なる解釈で表示するモードのことです。ブラウザによってはさらにその中間モード（Almost Standard）があります。
互換モードでウェブページが表示される場合、 CSSの指定が正しく解釈されないため、文字サイズやレイアウトなどが制作者の意図と異なってしまう場合があります。 ブラウザの種類とバージョンによっては、例えば以下の点などで表示の違いが起こることがあります。
  • text-alignプロパティによるブロック要素のセンタリング
  • margin:autoの動作
  • ボックスサイズの算出
  • フォントの標準サイズ
表示モードが切り替わるブラウザのバージョンは以下の通りです。
  • Windows版 Internet Explorer 6以上
  • Mac版 Internet Explorer 5以上
  • Firefox 1.0以上
  • Opera 7以上
  • Netscape 6以上
  • Safari 1.0以上

DOCTYPEスイッチ確認表

HTML文書内のDOCTYPE宣言の記述のしかたと各ブラウザの表示モードの関係については、以下の表を参考にしてください。
※S ･･･標準モード（Standard）、または、中間モード（Almost Standard）
※Q ･･･互換モード（Quirks）
DTDの
種類		 DTDの
記述		 Win
IE7以上		 Win
IE6		 Mac
IE		 Fx O N S

-

 なし Q Q Q Q Q Q Q
HTML4.01
Strict		 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> S S Q S S S S
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> S S S S S S S
HTML4.01
Transitional		 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> S S S S S S S
HTML4.01
Frameset		 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> S S S S S S S
XHTML1.0
Strict		 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> S S S S S S S
<?xml version="1.0" encoding="文字コード"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">		 S Q S S S S S
XHTML1.0
Transitional		 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> S S S S S S S
<?xml version="1.0" encoding="文字コード"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">		 S Q S S S S S
XHTML1.0
Frameset		 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> S S S S S S S
<?xml version="1.0" encoding="文字コード"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">		 S Q S S S S S

IE6ではXML宣言をすると互換モードになる
上記の表で、Internet Explorer 6でXHTML文書が互換モードになるのはブラウザのバグです。 XHTML文書を作成する際には、文書の先頭でXML宣言をすることが推奨されていますが、 IE6では1行目がDOCTYPE宣言から始まっていないと互換モードで表示されてしまいます。
例：IE6ではXML宣言を記述すると（DOCTYPE宣言から始まっていないと）、互換モードで表示される
?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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>XHTML文書</title>
</head>
<body>

</body>
</html>
XHTML文書では、文書の文字コードがUTF-8またはUTF-16の場合にはXML宣言を省略することが可能です。 そのため、文字コードをUTF-8またはUTF-16にして作成すれば、XML宣言を省略してIE6の互換表示を回避することができます。

IE8以降では標準モードの種類が指定できる
IE8からは標準モードの種類が指定できるようになっています。 原則としてDOCTYPE宣言の記述の仕方で標準モードと互換モードが切り替わる点はIE7と同様ですが、 IE8にはIE8標準モードと互換モードのほかに、IE7標準モードが用意されています。
これは、IE8がIE7よりも厳密に標準仕様を解釈するようになっているためです。 例えば、layout-grid系のプロパティはIEの独自仕様ですが、IE7では標準モードでも動作していました。 これが、IE8標準モードでは動作しなくなっています。 この場合、IE7標準モードを指定することで、互換モードにすることなくこれらのプロパティを動作させることができます。 このように、IE8では標準仕様への実装の度合いに応じて、より詳細に表示モードを指定し分けることができるようになっています。
IE8以降でIE7標準モードを指定するには、meta要素で以下のように記述します。 meta要素による指定は、DOCTYPE宣言による指定よりも優先されます。
​meta要素によるIE7標準モードの指定
<meta http-equiv="X-UA-Compatible" content="IE=7">
</body>
</html>
他にもIE=7の部分を指定し分けることで、表示モードを切り替えることができます。
  • IE=8 …… IE8標準モード
  • IE=7 …… IE7標準モード
  • IE=5 …… 互換モード
  • IE=edge …… 最新の表示モード
  • IE=EmulateIE8 …… DOCTYPE宣言でIE8標準モードと互換モードが切り替わる
  • IE=EmulateIE7 …… DOCTYPE宣言でIE7標準モードと互換モードが切り替わる
尚、IE8には表示モード切り替えボタンが付いており、ユーザー側で表示モードを切り替えることができるようになっていますが、 meta要素で表示モードを指定すると、このボタンが表示されなくなります。
下は、 <meta http-equiv="X-UA-Compatible" content="IE=7"> を指定している場合の画面です。