IEのドキュメントモードとは - ホームページ制作講座

InternetExploreのドキュメントモードとは、Webページのソースコード、DTD宣言などに応じてHTMLおよびCSSの出力方法、つまりレンダリング/表示方法が変わる仕組みのことです。

これはIEのバージョンによって、レンダリングする機能(レンダリング・エンジン)が大きく異なるためだ。背景にはリリースされる時期ごとに、Web標準への準拠があり、レンダリング・エンジンのバージョンによっては、意図したとおりにWebページが表示されない。

それを回避するために、バージョンごとの表示機能をIEは実装しています。
ドキュメントモードは、ページ制作者側でも指定できますし、UA側でも変更することが可能です。

IE10においてのドキュメントモード以下の通り。

IEのバージョンによりレンダリングがことなるので、レイアウトが崩れたりすることがあるので、正しいレンダリング・モードで表示指定する必要がある。

ドキュメントモードの選択によりレイアウトが崩れたり、表示が意図しない場合は、制作側で表示指定の記述が必要だ。

■ドキュメントモードの説明

ドキュメントモードには大きく分けるとIEx標準と、Quirks(クワークス)モードがある。

○Quirksモードとは？

いわゆる古いドキュメントエンジン用の表示設定で、DOCTYPEの宣言がない場合やHTML2.0/3.0など、HTML4以前のHTMLコードで制作された場合に選択される。

例えばIE10では以下がヘッダにあると、標準モード(IE10ドキュメントモード)がページの既定となり表示され、DTD宣言をなくすと、Quirksモードが既定のモードとなり表示される。

HTML5でのDTD記述、

では標準モード、記述をなくせばQuirksモードがページ既定のモードとなり表示。

IE5 QuirksモードとQuirks(ページの既定)は異なります。

Quirks モードは、標準モードと同一APIの動作セットで、HTML5と関連するW3C仕様で定義されている、限られた例外機能が使用可能になっています。

.機能などがあった場合、ドキュメントモードをmetaタグに記述して自動選択して表示させることが可能だ。

■ドキュメントモードの指定にはmetaタグ内でモードを指定方法

headタグ内のtitleタグの上に下記を追加して互換モードを指定可能だ。

を指定することが可能だ。

互換モードというのは、次世代のバージョンに対応しない形式で作成されたWebページなどを、以前のバージョンのレンダリングエンジンで表示させることができるモード。

■ドキュメントモードのブラウザからの確認方法

[F12]キーを押すか、メインメニューの[ツール]-[開発者モード]で、ウィンドウ下部に開発者ツールウィンドウが表示される。

メニュー部分のブラウザモードの右に、ドキュメントコードがあり、選択されているドキュメントモードが表示されている。この項目を選択するとプルダウンメニューが表示されるので、指定を変更するときは、メニューからモード指定することができる。

■表示されているIEのレンダリング・モードの確認用JavaScript

Webページ表示の時に選択されているレンダリングモードを表示させるJavaScriptによる記述。