情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

ドキュメント互換性の定義

.NET Framework 3.0

更新日 : 2009 年 2 月

ドキュメント互換性は、Internet Explorer による Web ページのレンダリング方法を定義します。 この記事では、ドキュメント互換性、Web ページのドキュメント互換モードの指定方法、および Web ページのドキュメント モードの判別方法について説明します。

はじめに

Internet Explorer の将来的なバージョンでも Web ページが一貫した外見を確保できるようにするため、Internet Explorer 8 ではドキュメント互換性を導入しています。 Microsoft Internet Explorer 6 で導入された互換モードの拡張版であるドキュメント互換性は、Internet Explorer が Web ページを表示する際に使用する特定のレンダリング モードの選択を可能にします。

この記事では、ドキュメント互換性の必要性について説明し、Internet Explorer の最近のバージョンで使用できるドキュメント互換モードのリストを示し、特定の互換モードを選択する方法を説明します。

ドキュメント互換性の必要性について

Internet Explorer は、メジャー リリースごとにブラウザーの操作性の改良やセキュリティの強化を進め、より忠実に業界標準をサポートするための機能を追加しています。 Internet Explorer の機能が拡充されるにしたがって、従来の Web サイトが正しく表示されなくなるリスクも増加します。

このリスクを最小限にするため、Internet Explorer 6 では、Internet Explorer による Web ページの解釈方法と表示方法を Web 開発者が選択できるようにしました。 既定のモードは "Quirks モード" でした。このモードでは、旧バージョンのブラウザーと同じようにページが表示されます。 "標準モード" (別名 "Strict モード") は、業界標準を最大限サポートしていましたが、この拡張サポートを活用するには、Web ページに適切な <!DOCTYPE> ディレクティブが含まれている必要がありました。

サイトに <!DOCTYPE> ディレクティブが含まれていない場合、Internet Explorer 6 はそのサイトを Quirks モードで表示します。 サイトに有効な <!DOCTYPE> ディレクティブが含まれていても、ブラウザーがそれを認識しない場合、Internet Explorer 6 はそのサイトを Internet Explorer 6 標準モードで表示します。 <!DOCTYPE> ディレクティブを含んでいるサイトはその時点でほとんどなかったため、互換モードの切り替えは非常に成功し、 その結果 Web 開発者は最も適切なタイミングを選んでサイトを標準モードに移行することができました。

やがて、多くのサイトが標準モードに依存するようになり、 Internet Explorer 6 の機能と動作を利用して Internet Explorer を検知するサイトも増えました。 たとえば、Internet Explorer 6 は ユニバーサル セレクターをサポートしていませんでしたが、一部の Web サイトでは、Internet Explorer に特定のコンテンツを提供する方法として、ユニバーサル セレクターが使用されていました。

Internet Explorer 7 では、より十分に業界標準をサポートするために、ユニバーサル セレクターのサポートなどの新機能が提供されました。 <!DOCTYPE> ディレクティブは 2 種類の設定 (Quirks モードおよび標準モード) のみをサポートするため、Internet Explorer 7 標準モードによって Internet Explorer 6 標準モードが置き換えられました。

その結果、Internet Explorer 6 標準モードの動作 (ユニバーサル セレクターがサポートされないなど) に依存していたサイトは、ブラウザーの新バージョンを検知することができませんでした。 また、Internet Explorer 7 に Internet Explorer 固有のコンテンツを提供することができず、これらのサイトは希望どおりに表示されませんでした。 Internet Explorer 7 では 2 つの互換モードしかサポートされていなかったので、該当するサイトの所有者は、Internet Explorer 7 をサポートするようにサイトを更新せざるを得ませんでした。

Internet Explorer 8 では、以前のバージョンよりも厳密に業界標準をサポートしています。 そのため、旧バージョンのブラウザー向けに設計されたサイトが、希望どおりに表示されない可能性があります。 この問題を解決するために、Internet Explorer 8 では、ドキュメント互換性という概念を導入し、サイトの設計でサポートされる Internet Explorer のバージョンを指定できるようにしています。 ドキュメント互換性により、Internet Explorer 8 に新しいモードが追加されます。これらのモードによって、Web サイトの解釈方法とレンダリング方法がブラウザーに指示されます。 Internet Explorer 8 でサイトが正しく表示されない場合、最新の Web 標準をサポートするようにサイトを更新する (推奨) こともできますし、Internet Explorer 8 にコンテンツを旧バージョンのブラウザーと同じように表示させることもできます。 これは、 meta 要素を使用して Web ページに X-UA-Compatible ヘッダーを追加することで実現されます。

これにより、適切な時期を選んでサイトを更新し、Internet Explorer 8 でサポートされる新機能をサイトでサポートすることが可能になります。

ドキュメント互換モードについて

Internet Explorer 8 は、いくつかのドキュメント互換モードをサポートしています。これらのモードは、有効な機能がそれぞれ異なり、コンテンツの表示方法に影響する場合があります。

  • Emulate IE8 モード : <!DOCTYPE> ディレクティブを使用してコンテンツのレンダリング方法を決定するように Internet Explorer に指示します。 標準モード ディレクティブは Internet Explorer 8 で表示されます。標準モードおよび Quirks モード ディレクティブは IE5 モードで表示されます。 IE8 モードとは異なり、Emulate IE8 モードでは <!DOCTYPE> ディレクティブが考慮されます。

  • Emulate IE7 モード : <!DOCTYPE> ディレクティブを使用してコンテンツのレンダリング方法を決定するように Internet Explorer に指示します。 標準モード ディレクティブは Internet Explorer 7 で表示されます。標準モードおよび Quirks モード ディレクティブは IE5 モードで表示されます。 IE7 モードとは異なり、Emulate IE7 モードでは <!DOCTYPE> ディレクティブが考慮されます。 多くの Web サイトでは、この互換モードが推奨されます。

  • IE5 モード : Internet Explorer 7 の Quirks モードと同様にコンテンツをレンダリングします。コンテンツは Internet Explorer 5 で表示した場合と非常に近い外見になります。

  • IE7 モード : ページに <!DOCTYPE> ディレクティブが含まれるかどうかにかかわらず、Internet Explorer 7 の標準モードと同様にコンテンツをレンダリングします。

  • IE8 モード : W3C Cascading Style Sheets Level 2.1 仕様  World Wide Web リンク および W3C セレクター API  World Wide Web リンク のほか、 W3C Cascading Style Sheets Level 3 仕様 (ワーキング ドラフト)  World Wide Web リンク の制限付きサポートを含めて、現時点で使用可能な、業界標準の最高のサポートを提供します。

  • edge モード : 使用可能な最高のモードでコンテンツを表示するよう、Internet Explorer に指示します。 Internet Explorer 8 の場合、これは IE8 モードに相当します。 Internet Explorer の今後のリリース (仮定) でより高度な互換モードがサポートされる場合、edge モードに設定されたページは、そのバージョンでサポートされる最高のモードで表示されます。 これらのページを Internet Explorer 8 で表示した場合には、依然として IE8 モードで表示されます。

edge モードのドキュメントは、表示に使用する Internet Explorer バージョンで使用可能な最高のモードを使用して Web ページを表示するため、実用以外の用途 (テスト用のページなど) に限定して使用することをお勧めします。

ドキュメント互換モードの指定

Web ページのドキュメント モードを指定するには、meta 要素を使用して X-UA-Compatible  http-equiv ヘッダーを Web ページに含めます。 次の例では、Emulate IE7 互換モードを指定しています。

<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html> 

content 属性により、そのページのモードを指定します。たとえば、Windows Internet Explorer 7 と同様の動作を行うには、「IE=EmulateIE7」と指定します。 上記のいずれかの互換モードを選択するには、「IE=5」、「IE=7」、または「IE=8」と指定します。 また、「IE=edge」と指定することで、Internet Explorer 8 に対して、利用できる最も互換性の高いモードを使用するよう指示できます。

X-UA-compatible ヘッダーには大文字/小文字の区別はありません。ただし、このヘッダーは、Web ページのヘッダー ( HEAD セクション) で、 title 要素およびその他の meta 要素以外のすべての要素の前に置く必要があります。

Web サーバーの設定による既定の互換モードの指定

サイト管理者は、サイトのカスタム ヘッダーを定義することで、そのサイトが特定のドキュメント互換モードを既定で使用するように設定することができます。 具体的なプロセスは、Web サーバーによって異なります。 たとえば、次の web.config ファイルを使用すると、Microsoft インターネット インフォメーション サービス (IIS) によって、すべてのページを自動的に IE7 モードでレンダリングするカスタム ヘッダーを定義できます。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE7" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration> 

Web サーバーを使用して既定のドキュメント互換モードを指定する場合、特定の Web ページで別のドキュメント互換モードを指定して、その設定を上書きすることができます。 Web ページで指定されたモードは、サーバーで指定されたモードよりも優先されます。

カスタム ヘッダーの指定については、使用する Web サーバーの資料を参照してください。 詳細については、次を参照してください。

ドキュメント互換モードの判別

Internet Explorer 8 を使用して Web ページのドキュメント互換モードを判別するには、 document オブジェクトの documentMode プロパティを使用します。 たとえば、Internet Explorer 8 のアドレス バーに次のように入力すると、現在の Web ページのドキュメント モードが表示されます。

javascript:alert(document.documentMode);

documentMode プロパティによって、ページのドキュメント互換モードに対応する数値が返されます。 たとえば、ページで IE8 モードをサポートするよう選択されている場合、documentMode は値 8 を返します。

Internet Explorer 6 で導入された compatMode プロパティよりも、Internet Explorer 8 で導入された documentMode プロパティを優先的に使用してください。現状で compatMode を使用しているアプリケーションは Internet Explorer 8 でも引き続き動作しますが、documentMode を使用するように更新する必要があります。

JavaScript を使用してドキュメントの互換モードを判別する場合は、次の例のように、旧バージョンの Internet Explorer をサポートするコードを含めます。

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
      }
   }
   // the engine variable now contains the document compatibility mode.
}

content 属性値について

content 属性は、前述した値以外の値でも使用できるという点で柔軟性があります。 そのため、開発者は Internet Explorer での Web ページの表示を強力にコントロールできます。 たとえば、content 属性を IE=7.5 に設定すると、 Internet Explorer はこの値から バージョン ベクターへの変換を試み、その結果に最も近いモードを選択します。 この場合、Internet Explorer は IE7 モードに設定されます。 その他の値で選択されるモード (影響する条件が他にない場合) の例を次に示します。

<meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5" > <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100" > <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a" >   <!-- IE5 mode --> 

<!-- This header mimics Internet Explorer 7 and uses 
     <!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >    
メモ : 上記の例は、個々の content 値の結果を示しています。 実際には、Internet Explorer は Web ページの最初の X-UA-Compatible ヘッダーのみを考慮します。

content 属性を使用して、複数のドキュメント互換モードを指定することもできます。これは、将来的なブラウザー バージョンでも Web ページの表示に一貫性を確保するために役立ちます。 複数のドキュメント モードを指定するには、content 属性で使用するモードを識別し、 各モードをセミコロンで区切ります。

要求された互換モードを 2 つ以上サポートする Internet Explorer のバージョンは、ヘッダーの content 属性でリストされている、使用可能なモードのうち最高のモードを使用します。 この事実を利用して、特定の互換モードを除外することは可能ですが、この方法はお勧めできません。 たとえば、次のヘッダーは IE7 モードを除外します。

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" >

既定のレンダリングの制御

Internet Explorer 8 で Web ページに X-UA-Compatible header が含まれていないことが検知された場合、Internet Explorer 8 は <!DOCTYPE> ディレクティブを使用してページの表示方法を判断します。 <!DOCTYPE> ディレクティブが存在しないか、<!DOCTYPE> ディレクティブで標準ベースのドキュメント タイプが指定されていない場合、Internet Explorer 8 ではページが IE5 モード (Quirks モード) で表示されます。

<!DOCTYPE> ディレクティブで標準ベースのドキュメント タイプが指定されている場合、Internet Explorer 8 ではページが IE8 モードで表示されます。ただし、次の場合は例外とします。

  • ページで互換表示が有効になっている。

  • ページがイントラネット ゾーンで読み込まれ、イントラネット ゾーンのページを互換表示で表示するように Internet Explorer 8 が構成されている。

  • すべての Web サイトを互換表示で表示するように Internet Explorer 8 が構成されている。

  • 常に互換表示で表示される Web サイトのセットを指定した互換表示一覧を使用するように Internet Explorer 8 が構成されている。

  • 開発者ツールを使用して、Web ページで指定されている設定を上書きしている。

  • Web ページでページ レイアウト エラーが発生し、互換表示でページを再度開くことでこのようなエラーから自動的に復旧するように Internet Explorer 8 が構成されている。

詳細については、「 Internet Explorer ブログ : 互換表示の要点  World Wide Web リンク」 (英語の可能性あり) を参照してください。

メモ : イントラネット ページを互換表示で読み込むように構成している場合、Internet Explorer では localhost アドレスまたは loopback アドレス を使用して読み込まれたページは例外として扱われます。 <!DOCTYPE> ディレクティブで標準ベースのドキュメント タイプが指定されている場合、これらのいずれかの方法を使用して読み込まれたページは IE8 モードで表示されます。

また、次のレジストリ キーを使用すると、X-UA-Compatible ヘッダーが含まれていないページの Internet Explorer での処理方法を制御できます。

HKEY_LOCAL_MACHINE (または HKEY_CURRENT_USER)
     SOFTWARE
          Microsoft
               Internet Explorer
                    Main
                         FeatureControl
                              FEATURE_BROWSER_EMULATION
                                   iexplore.exe = (DWORD)

DWORD 値には、次のいずれかと等しい値を設定する必要があります。

既定では、 WebBrowser コントロール をホストするアプリケーションは、ページに適切な X-UA-Compatible ヘッダーが含まれている場合以外、標準ベースのページを IE7 モードで開きます。 この設定を変更するには、機能コントロール キー FEATURE_BROWSER_EMULATION にアプリケーションの実行可能ファイルの名前を追加し、必要に応じた値を設定します。

まとめ

互換性は Web デザイナーにとって重要な考慮事項です。 Web ブラウザーの特定の動作または機能に依存しないサイトを作成するのが最善ですが、それが不可能な場合もあります。 ドキュメント互換モードでは、Web ページが特定のバージョンの Windows Internet Explorer の動作に関連付けられます。

X-UA-Compatible ヘッダーを使用して、そのページがサポートする Internet Explorer バージョンを指定します。 Web ページの互換モードを判別するには、document.documentMode を使用します。

サポートする Internet Explorer バージョンを選択することで、このブラウザーの将来的なバージョンでページの表示の一貫性を確保することが可能になります。

関連トピック

コミュニティの追加

表示:
© 2014 Microsoft