Internet Explorer 8 の開発者ツールの概要
.gif "Windows Internet Explorer 8 の新機能")
メモ : このドキュメントは暫定版であり、変更されることがあります。
Internet Explorer 8 の拡張された開発者ツールは、HTML、CSS (Cascading Style Sheet)、JavaScript に関係する問題の調査と解決に役立ちます。この記事では、HTML と CSS の開発者ツールについて説明します。
- はじめに
- 開発者ツールの開始と終了
- 各種モードでの Web ページのテスト
- Web ページ上のオブジェクトのアウトライン
- Web ページ上のオブジェクトの選択
- HTML ツールの使用
- スタイル/スタイル追跡ツールの使用
- レイアウト ツールの使用
- CSS ツールの使用
- 変更の保存
- まとめ
- 関連トピック
はじめに
Internet Explorer 8 の開発者ツール機能を使用すると、ブラウザーの観点から Web ページの内部表現を確認できます。個々の属性の表示、要素ごとに適用される CSS ルールの特定、各種ドキュメント互換モードでのプレビューなど、多様な作業に開発者ツールを使用できます。ブラウザーでの Web ページの解釈方法を参照できるため、以前の Internet Explorer バージョンよりも迅速に問題を検査し、解決できるようになります。
この記事では、HTML と CSS の開発者ツールについて説明します。開発者ツールを使った JavaScript のデバッグの詳細については、「開発者ツール : スクリプト デバッグの概要」を参照してください。
開発者ツールの開始と終了
開発者ツールを開くには、F12 キーを押すか、Internet Explorer 8 のツール バーの [ツール] メニューで ［開発者ツール］ をクリックします。次の図は、[開発者ツール] ウィンドウです。
![Internet Explorer 8 の [開発者ツール] ツール バー ボタンと [閉じる] ボタンの位置を示す図](images/cc848894.cc848894devtools_ovw_fig01(ja-jp,vs.85).gif "Internet Explorer 8 の [開発者ツール] ツール バー ボタンと [閉じる] ボタンの位置を示す図")
図 1: [開発者ツール] コマンドと [閉じる] ボタン
起動した開発者ツールは、専用のウィンドウに表示することも、ツールを開いたブラウザーのインスタンスに固定することもできます。Internet Explorer の各タブには、独自の開発者ツールがあります。開発者ツールのインスタンスを複数使用する場合は、固定機能 ([開発者ツール] ウィンドウの右上隅にあるボタン) を使用して、各開発者ツールをウィンドウに固定します。固定した [開発者ツール] ウィンドウをサイズ変更して、表示可能領域をより大きくすることもできます。
開発者ツールを閉じるには、F12 キーを押すか、[ツール] メニューの [開発者ツール] ボタンをクリックするか、[開発者ツール] ウィンドウの右上隅にある [閉じる] ボタンをクリックするか、開発者ツールを開いていた Internet Explorer ウィンドウまたはタブを閉じます。
各種モードでの Web ページのテスト
開発者ツールを使用すると、さまざまなモードで Web ページをテストできます。これにより、互換性に関する問題をユーザーが見つける前にすばやく解決できます｡開発者ツールを初めて開くときには、Web ページのモード設定が検出され、そのページの既定のモードとして扱われます。この後、[ブラウザー モード] メニューと [ドキュメント モード] メニューを使用して、Web ページをテストすることができます｡
ブラウザー モードのテスト
[ブラウザー モード] メニューを使用して、ブラウザーが次の 3 つのプロパティを報告する方法を選択できます。
| プロパティ | 説明 |
|---|---|
| ユーザー エージェント文字列 | Internet Explorer が自身を識別するために Web サーバーに送信する値。 |
| バージョン ベクター | 条件付きコメントに使用する値。この値を使用して、CSS、マークアップ、スクリプト ブロックに働きかけることもできます。条件付きコメントとバージョン ベクターの詳細については、次の記事を参照してください。 . |
| ドキュメント モード | Internet Explorer が CSS、DOM、および JavaScript オペレーションの最新の動作を使用するか、互換性を保つために以前の Internet Explorer バージョンをエミュレートするかを決定する値。 |
ブラウザー モードの場合、[開発者ツール] メニュー バーには 3 つのオプションが提供されます。各オプションを使用すると、前述の表で説明したプロパティをさまざまな方法で変更できます。次の表で、これらのオプションについて説明します。
| ブラウザー モード | 説明 |
|---|---|
| Internet Explorer 7 | このモードでは、Internet Explorer 7 を使用した場合と同じように、Internet Explorer 8 が ユーザー エージェント、バージョン ベクター、ドキュメント モードを報告します。このモードは、Internet Explorer 7 ユーザーのサイト エクスペリエンスをテストする場合に使用します。 |
| Internet Explorer 8 | このモードでは、Internet Explorer 8 で最も標準に準拠している既定のブラウザー動作に合わせて、Internet Explorer 8 がユーザー エージェント、バージョン ベクター、ドキュメント モードを報告します。このモードは、Internet Explorer 8 ユーザーの Web サイト エクスペリエンスをテストする場合に使用します。 |
| Internet Explorer 8 の [互換表示] | このモードでは、Internet Explorer 7 を使用した場合と同じように、Internet Explorer 8 が バージョン ベクターとドキュメント モードを報告しますが、ユーザー エージェント文字列に含まれるトークンは、これが実際には Internet Explorer 8 であり、Internet Explorer 7 の文字列も一緒に使用していることを示します。このモードは、Internet Explorer で [互換表示] オプションを選択した状態で、Internet Explorer 8 ユーザーの Web サイト エクスペリエンスをテストする場合に使用します。 |
メモ: ユーザーが [互換表示] ボタン (![[互換表示] ボタン](images/cc848894.cc848894ie8_devtools_compatview(ja-jp,vs.85).gif "[互換表示] ボタン")
) をクリックすると、ブラウザーはドメインを互換表示の一覧に保存します。その後、このドメインへのアクセスは、自動的に Internet Explorer 8 の [互換表示] モードで描画されます。ユーザーは、[ツール] メニューの [互換表示設定] を選択して、ブラウザーの互換表示の一覧からドメインを追加または削除できます。
ドキュメント モードのテスト
「ドキュメント互換性の定義」で述べられているように、Internet Explorer 8 では、ドキュメント互換のコンセプトを導入し、ブラウザーが Web ページを解釈して表示する方法を制御できるようにしています。開発者ツールを使用すると、Web ページの表示に使用される互換モードを動的に選択できます。そのため、互換モードごとの視覚的な相違を確認したうえで、その Web ページに最適な互換モードを判断できます。
特定の Web ページのドキュメント互換モードを変更するには、[開発者ツール] メニューの [ドキュメント モード] をクリックします。このモードでは、Internet Explorer が Web ページを描画する方法が定義されますが、バージョン ベクターまたはユーザー エージェント文字列には影響を及ぼしません。ブラウザー モードでこのオプションを使用すると、Web サイトに最適なドキュメント モードをすばやく判断できます。ドキュメント モードには、次の 3 つのオプションがあります。
| ドキュメント モード | 説明 |
|---|---|
| Quirk | ドキュメント タイプなし、または Quirk ドキュメント タイプでドキュメントが描画される場合、この動作は Internet Explorer の動作と同じになります。これは、Microsoft Internet Explorer 5 の動作および Internet Explorer 6 の Quirk モード動作に似たもので、Internet Explorer 7 の Quirk モード動作と同じです。 |
| Internet Explorer 7 標準 | この動作は、strict または不明なタイプのドキュメントを描画する場合、Internet Explorer 7 の動作と同じになります。 |
| Internet Explorer 8 標準 | Internet Explorer 8 で使用可能な最新の標準準拠の動作です。これは、Internet Explorer 8 で strict または不明なタイプのドキュメントを描画する際に使用する既定のモードです。 |
メモ: その他の開発者ツールの変更と同様、ブラウザー モードまたはドキュメント モードでの変更は一時的なものであり、Web ページのソースには影響しません。ブラウザー タブで選択したモードは、別のモードを選択するかそのタブを閉じるまで有効です。
Web ページ上のオブジェクトのアウトライン
開発者ツールの [アウトライン] メニューでは、Web ページ上のオブジェクト セットを強調表示できます。これにより、各要素が Web ページ上で表示される位置と、特定の効果の作成に使用される要素のタイプを容易に判断できます。[アウトライン] からコマンドを選択すると、Internet Explorer によって対応する要素のアウトラインが表示されます。たとえば、div 要素のコマンドを選択すると、現在の Web ページの div 要素すべてに関連したアウトラインが表示されます (下図を参照)。
![[アウトライン] メニューのコマンドによって、現在の Web ページにオブジェクトが強調表示された図。ここでは、緑の長方形がページの div 要素のアウトライン。](images/cc848894.cc848894devtools_ovw_fig02(ja-jp,vs.85).gif "[アウトライン] メニューのコマンドによって、現在の Web ページにオブジェクトが強調表示された図。ここでは、緑の長方形がページの div 要素のアウトライン。")
図 2: Web ページ上のオブジェクトの位置を示す [アウトライン] メニューのコマンド
一連のアウトラインを消去するには、[アウトライン] メニューで該当するコマンドをクリックするか、[アウトライン] メニューの [アウトラインのクリア] をクリックします。
Web ページ上のオブジェクトの選択
HTML と CSS の開発者ツールの多くは、Web ページ内の個別の要素を操作します。要素を選択するには、HTML ツールで要素を強調表示するか、開発者ツールの [検索] メニューで [クリックで要素を選択] をクリックします。このボタンをクリックすると、マウスを使用して Web ページの要素を選択できるようになります。要素にカーソルを合わせ、青色のボックスでその要素の境界線が強調表示されたら、要素をクリックして選択します。次の図に、要素を選択した結果を示します。
![[クリックで要素を選択] ボタンと要素の選択結果を示す図](images/cc848894.cc848894devtools_ovw_fig03(ja-jp,vs.85).gif "[クリックで要素を選択] ボタンと要素の選択結果を示す図")
図 3: [クリックで要素を選択] ボタンと要素の選択結果
HTML 要素を強調表示してクリックすると、選択した要素の属性が HTML ツールに表示されます。このとき、Web ページの表示に使用されている Internet Explorer 8 の内部表現での位置も表示されます。要素の現在の属性値を表示したり、HTML ツールを使用して変更した新しい値を試すことができます。属性値を変更するには、属性をクリックして新しい値を入力し、Enter キーを押します。Internet Explorer 8 に、変更の効果が表示されます。Enter キーを押す前に ESC キーを押すと、不完全な値を破棄できます。元の外観を復元するには、Web ページを更新します。
メモ: HTML ツールを使用して行った変更は、Web ページのソースに影響しません。Web ページを更新するか、ブラウザーで新しい Web ページに移動するか、またはブラウザー ウィンドウを閉じるまで、その効果は維持されます。
HTML ツールの使用
HTML ツールを使用すると、Web ページ上での HTML 要素の表示を確認できます。各機能は HTML ツールの右側に表示され、次のようなものがあります。
スタイルには、選択した要素に適用された CSS ルールが表示されます。影響を与えている属性と、その値が指定されている位置も表示されます。各ルールの左にあるチェック マークをクリックして、ルールの有効/無効を切り替えることができます。このチェック マークは要素の外観を試す場合に使用できます。要素のルールはカスケード順に表示されます。つまり、一覧で最後のルールが適用されると、一覧でそれより上位にあるルールが上書きされ、取り消し線が引かれます。
スタイル追跡には、要素に適用された CSS 属性、属性が定義された要素、および属性値を定義しているスタイル シート名 (該当する場合) が表示されます。属性のルールはカスケード順に表示されます。つまり、一覧で最後の要素が適用されると、一覧でそれより上位にある要素が上書きされ、取り消し線が引かれます。
レイアウト ツールには、要素のボックス モデルの属性と、対応するオブジェクトとの関係が表示されます。ボックス モデルの詳細については、「W3C のボックス モデルについて (英語)
.gif "World Wide Web リンク")
」を参照してください。属性ツールには、選択した要素のすべての属性とその値が表示されます。
スタイル/スタイル追跡ツールの使用
スタイル ツールとスタイル追跡ツールで、選択した要素に適用される CSS ルールが複数検出された場合は、CSS の特殊性に基づいてルールが表示されます。一覧の最上位のルールが、選択した要素に最初に適用され、一覧の最下位のルールが、選択した要素のスタイル属性を現在定義しているルールとなります。これらのルールの値は編集可能です。値をクリックして新しい値を入力すると、直ちに Web ページ上に変更が反映されます。
レイアウト ツールの使用
レイアウト ツールには以下の値が表示されます。
オフセット値は選択したオブジェクトと親オブジェクトとの距離を示し、offsetLeft プロパティと offsetTop プロパティによって定義されています。
余白、境界線、および埋め込み値には、Web ページのソースで指定された値が表示されます。値が指定されていない場合、レイアウト ツールには Internet Explorer の既定の値が表示されます。
最も内側の値は、要素の高さと幅であり、offsetHeight プロパティと offsetWidth プロパティによって定義されています。
各ボックス モデルの属性の測定値と測定単位が表示されます。値をクリックして編集し、Enter キーを押して新しい値を確定します。キャンセルするには ESC キーを押します。既定では (レイアウト ツールに測定単位が表示されない場合)、レイアウト ツールはボックス モデル属性をピクセル単位で処理します。
CSS ツールの使用
CSS ツールによって、スタイル シート間の相互作用がわかります。これは複数のスタイル シートを使用しているサイトに最適です。スタイル シート間を切り替えるには、スタイル シートの選択ボタンをクリックします。Web ページで読み込まれたすべてのスタイル シートがメニューに一覧表示されます。スタイル シートを選択すると、ルールと、スタイル シートに関連したスタイル属性がプライマリ コンテンツ ペインに表示されます。既定では、Web ページで参照される最初のスタイル シートが表示されます。スタイル シートの選択ボタンの下にはスタイル シートのルールが表示されます (図 4 を参照)。
.gif "CSS ツールに、Web ページで使用されるすべてのスタイル シートで定義されたルールが表示されている図")
図 4: CSS ツールに、Web ページで使用されるすべてのスタイル シートで定義されたルールが表示されている図
ルールの属性を展開または折りたたむには、[+] または [-] のマークをクリックします。このスタイル シート ビューの要素はすべて編集可能です。編集は直ちに反映されます。
変更の保存
HTML ページと CSS ファイルに変更を加えたら、変更内容を保存することができます｡[HTML] タブおよび [CSS] タブで、[保存] アイコンをクリックすると、現在のファイルの変更内容がすべて保存されます。[名前を付けて保存] ダイアログ ボックスでは、ファイルを .html または .css 形式ではなく .txt 形式で保存するかどうかを尋ねるプロンプトが表示されます。これにより、メインのソース ファイルが誤って上書きされるのを防ぐことができます。さらに、これが行われる理由は、開発者ツールで行われたすべての変更内容が、元のソースの内容ではなく、Internet Explorer による Web ページの内部表現であるためです。このため、現在の Web ページを更新したり、現在の Web ページから別のページに移動したり、[すべて元に戻す] を実行したりすると、元の Web ページに戻ります。
メモ: 開発者ツールで作業をする際には、Web サイトで修正された領域がソースと異なるだけでなく、その他の部分も異なる可能性がある点に注意してください。これは、開発者ツールに表示される Web サイトが、ソース内の状態ではなく、Internet Explorer 内の状態を表しているためです。ソースが誤って上書きされるのを防ぐため、開発者ツールでは出力内容がテキスト形式で保存され、ファイルの先頭にコメントが追加されます。
まとめ
Internet Explorer 8 開発者ツールは、Web ページでの問題の診断と解決に役立ちます。HTML ツールを使って、Web ページでの各 HTML 要素と、個々の属性を検証し、CSS ツールを使って、より広範に、スタイル シートの各種ルールや属性が Internet Explorer 8 でどのように解釈されるかを確認できます。開発者ツールでソースに加えた変更内容は、Internet Explorer による Web サイトの内部表現にのみ反映され、元のソースには直接反映されません。ただし、変更内容を保存して、それをソースの更新に使用することは可能です。こうすると、Web ページの保守を短時間で効率良く行うことができます。