トップページ  > HTMLの基本  > DOCTYPEスイッチ

★HTMLの基本

広告

■DOCTYPEスイッチ

表示モードの切り替え

比較的新しいブラウザには、HTMLやCSSの記述をどのように画面表示するかを決めるレンダリングモードが、 大きく分けて2種類備わっています。 レンダリングモードとは、ウェブページの表示方法を決めるブラウザの状態のことで、 DOCTYPE宣言の記述のしかたによって切り替わります。

標準モード(Standard)は、CSSなどの指定を仕様通りに解釈して表示するモードで、 互換モード(Quirks)は、まだCSSが普及していなかった時代の過去のブラウザとの互換のために、 あえて標準仕様とは異なる解釈で表示するモードのことです。ブラウザによってはさらにその中間モード(Almost Standard)があります。

互換モードでウェブページが表示される場合、 CSSの指定が正しく解釈されないため、文字サイズやレイアウトなどが制作者の意図と異なってしまう場合があります。 ブラウザの種類とバージョンによっては、例えば以下の点などで表示の違いが起こることがあります。

表示モードが切り替わるブラウザのバージョンは以下の通りです。

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">

他にもIE=7の部分を指定し分けることで、表示モードを切り替えることができます。

尚、IE8には表示モード切り替えボタンが付いており、ユーザー側で表示モードを切り替えることができるようになっていますが、 meta要素で表示モードを指定すると、このボタンが表示されなくなります。

表示モード切り替えボタンあり

下は、 <meta http-equiv="X-UA-Compatible" content="IE=7"> を指定している場合の画面です。

表示モード切り替えボタンなし
<前へ 記事一覧へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ