ドキュメント モードの問題を調査する

標準サポートを有効にする」では、Web ページのドキュメント タイプが、Web ページによってサポートされる機能を制御することについて説明しました。 Windows Internet Explorer やその他の最新ブラウザーで、サポートされるすべての機能を有効にするには、Web ページを標準モードにする必要があります。 次のコード例に示すように、標準ベースのドキュメント タイプを宣言して Web ページを標準モードにします。


<!DOCTYPE html>


Web ページで標準ベースのドキュメント タイプが宣言されていない場合、Internet Explorer で Web ページを表示しても、標準サポートが必要な機能は表示されません。 Web ページが適切に表示されない場合は、F12 開発者ツールを使って問題のトラブルシューティングを行うことができます。 ほとんどの場合、Web ページで !DOCTYPE ディレクティブを使って標準ベースのドキュメント タイプが宣言されていることを確かめることで、このような問題は解決します。

ここでは、F12 ツールを使って Web ページのドキュメント タイプに関連する問題を調査し、特定する方法について説明します。

標準サポートを有効にする」では、次の画像に似た Web ページを含む 2 つの Web ページを比較しました。

IE5 Quirks モードで表示した Web ページ

この Web ページのデザインには、角丸コーナーを表示するカスケード スタイル シート レベル 3 (CSS3) 属性である border-radius 属性が含まれます。 現在の例では、オブジェクトのコーナーは従来型の角型コーナーで表示されています。 これは、Web ページの表示に使われるドキュメント モードでサポートされないカスケード スタイル シート (CSS) プロパティを Internet Explorer が無視することが原因です。

IE5 (Quirks) モードでは border-radius プロパティがサポートされないため、Internet Explorer は、このドキュメント モードで Web ページを表示するときに、このプロパティを無視します。

Internet Explorer で Web ページを表示し、F12 ツールを使って Web ページを調べることができます。 これにより、先ほどの画像の角型コーナーのような問題を特定してトラブルシューティングを行うことができます。 ここでは、同様の問題を特定する方法を示します。また、以下の項目について説明します。

CSS 属性値の確認

Web ページ内のオブジェクトの CSS 属性値を調べるには、以下の手順を実行します。

  1. F12 キーを押して F12 ツールを開きます。

    F12 キーを押して F12 開発者ツールを開きます。
  2. [クリックで要素を選択] ボタンをクリックし、調べる CSS プロパティが含まれるオブジェクトをクリックします。

    クリックで要素を選択ツールか HTML ツリーを使って、調べるオブジェクトを選びます。
  3. [トレース スタイル] ボタンをクリックし、対象のプロパティの属性を調べます。

    トレース スタイル ツールで、Web ページで選択されたオブジェクトの CSS 属性を表示します。

この例では、border-radius 属性の子属性、特に border-bottom-left-radiusborder-bottom-right-radiusborder-top-left-radiusborder-top-right-radius の値を調べます。 しかし、この例の場合、これらの属性は表示されていません。

これは、Web ページが IE5 モードで表示されていることが原因です。 Windows Internet Explorer 9 では、border-radius プロパティが IE9 標準モードでしかサポートされていません。 IE5 モードでは border-radius プロパティがサポートされないため、Internet Explorer は CSS 属性を表示する際にこのプロパティを無視します。

次のセクションでは、Web ページの現在のドキュメント モードを変更することにより、この動作を調べます。

異なるドキュメント モードで Web ページを表示する

F12 ツールを使って異なるドキュメント モードで Web ページを表示するには、以下の手順を実行します。

  1. F12 ツールが開いていない場合は、F12 キーを押してツールを開きます。 現在のドキュメント モードが F12 ツール ウィンドウのメニュー バーの右側に表示されることがわかります。

    Web ページのドキュメント モードは F12 開発者ツール ウィンドウの上コーナー近くに表示されます。
  2. [ドキュメント モード] メニュー ボタンをクリックすると、Web ページの表示に使える他のドキュメント モードがメニューに表示されます。

    ドキュメント モード コントロールをクリックすると、Web ページに利用できる追加ドキュメント モードのメニューが表示されます。
  3. メニューの [Internet Explorer 9 標準] オプションをクリックし、IE9 モードで Web ページを表示します。 以前に選んだオブジェクトのスタイル属性をトレースしている場合は、border-radius の子属性がその他の CSS 属性と一緒に表示されます。

    Internet Explorer 9 標準コマンドでは、IE9 標準モードで Web ページが表示されます。
  4. 適切なドキュメント モードであれば、Web ページは予期されたとおりに表示され、div 要素は角丸コーナーで表示されます。

    IE9 標準モードで Web ページが表示されると、コーナーが丸くなります。

F12 ツールで変更できるのは Internet Explorer による現時点の Web ページの表示結果であり、Web ページの本来のソース コードは変更されないことに注意してください。

これが実際に運用されている Web ページの問題であれば、Web ページのマークアップを変更して、以下のコード例のように標準ベースのドキュメント タイプを指定する !DOCTYPE ディレクティブを記述します。


<!DOCTYPE html>


  "X-UA-Compatible" ヘッダーを使って Web ページのドキュメント モードを指定することもできます。詳しくは、「ドキュメント互換性の定義」をご覧ください。

F12 ツールには、Web ページの問題を特定して迅速にトラブルシューティングを行うことのできるさまざまなツールがあります。 この例では、これらのツールを使って Web ページのドキュメント モードに関連する問題を特定しました。F12 ツールについて詳しくは、「Web ページのデバッグとトラブルシューティング」をご覧ください。

関連トピック

標準サポートを有効にする

 

 

表示:
© 2015 Microsoft