読者です 読者をやめる 読者になる 読者になる

ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

IEのドキュメントモードとは

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

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

<a href="http://px.a8.net/svt/ejp?a8mat=2NG8KR+AY52C2+348+U2LRL" target="_blank"><img border="0" width="468" height="60" alt="" src="http://www24.a8.net/svt/bgt?aid=160321131662&wid=005&eno=01&mid=s00000000404005051000&mc=1"></a><img border="0" width="1" height="1" src="http://www19.a8.net/0.gif?a8mat=2NG8KR+AY52C2+348+U2LRL" alt=""><a href="http://px.a8.net/svt/ejp?a8mat=25RF6O+6ZUGR6+348+IHQ1T" target="_blank"><img border="0" width="468" height="60" alt="" src="http://www21.a8.net/svt/bgt?aid=130609824423&wid=005&eno=01&mid=s00000000404003106000&mc=1"></a><img border="0" width="1" height="1" src="http://www10.a8.net/0.gif?a8mat=25RF6O+6ZUGR6+348+IHQ1T" alt="">

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

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

....詳細は、ホームページ制作のWEB制作システム......

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仕様で定義されている、限られた例外機能が使用可能になっています。

....詳細は、ホームページ制作のWEB制作システム......機能などがあった場合、ドキュメントモードをmetaタグに記述して自動選択して表示させることが可能だ。

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

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

....詳細は、ホームページ制作のWEB制作システム......を指定することが可能だ。

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

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

<a href="http://px.a8.net/svt/ejp?a8mat=2NG8KR+AY52C2+348+U2LRL" target="_blank"><img border="0" width="468" height="60" alt="" src="http://www24.a8.net/svt/bgt?aid=160321131662&wid=005&eno=01&mid=s00000000404005051000&mc=1"></a><img border="0" width="1" height="1" src="http://www19.a8.net/0.gif?a8mat=2NG8KR+AY52C2+348+U2LRL" alt=""><a href="http://px.a8.net/svt/ejp?a8mat=25RF6O+6ZUGR6+348+IHQ1T" target="_blank"><img border="0" width="468" height="60" alt="" src="http://www21.a8.net/svt/bgt?aid=130609824423&wid=005&eno=01&mid=s00000000404003106000&mc=1"></a><img border="0" width="1" height="1" src="http://www10.a8.net/0.gif?a8mat=25RF6O+6ZUGR6+348+IHQ1T" alt="">

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

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

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

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

....詳細は、ホームページ制作のWEB制作システム......