開発者ツールでの HTML および CSS のデバッグ

Internet Explorer 8 には、強化された開発者ツールが用意されています。開発者ツールは、HTML、カスケード スタイル シート (CSS)、および Microsoft JScript 関連の問題の検証やその解決に役立ちます。 この記事は、開発者ツールの HTML ツールおよび CSS ツールに重点を置いています。

• 概要
• 開発者ツールを開く/閉じる
• Web ページのオブジェクトを選択する
• HTML 要素の検査
  • スタイル ツールおよびトレース スタイル ツールを使用する
  • レイアウト ツールを使用する
  • 属性ツールを使用する
• CSS ルールの検査
• 変更の保存
• まとめ
• 関連トピック

概要

Internet Explorer 8 の開発者ツールでは、Web ページのブラウザーの内部表現を確認できます。 開発者ツールは、個々の属性の表示、個々の要素に特定の CSS ルールを適用する根拠の特定、異なるドキュメント互換モードのプレビューなど (これに限らず) Web 開発のさまざまなタスクに使用できます。 ブラウザーが Web ページをどのように解釈するのかをはっきりさせることで、開発者ツールは問題の調査や解決を行う多くの機会を提供するだけでなく、以前のバージョンの Internet Explorer に比べてはるかに速くこれを行うことができます。

この記事は、HTML および CSS 開発者ツールに重点を置いています。 開発者ツールを使用して JScript でデバッグを行う方法の詳細については、「開発者ツールを使用したスクリプトのデバッグ」を参照してください。

開発者ツールを開く/閉じる

開発者ツールを開くには、F12 キーを押すか、Internet Explorer 8 ツール バーの [ツール] メニューの [開発者ツール] をクリックします。 次の図は、開発者ツールのウィンドウを示しています。

図 1. 開発者ツールのコマンドと閉じるボタン

開発者ツールを起動すると、ウィンドウ内に表示するか、それを開いたブラウザーのインスタンスに固定することができます。 Internet Explorer 8 のそれぞれのタブには、開発者ツールのインスタンスがあります。 開発者ツールの複数インスタンスを使用するとき、固定表示機能 (ボタンは開発者ツール ウィンドウの右上に表示) を使用して、それぞれの開発者ツールをウィンドウにアタッチします。 固定されている場合、開発者ツール ウィンドウをサイズ変更し、表示可能領域を広げることができます。

開発者ツールは、次のいずれかの方法で閉じます。 F12 キーを押すか、[ツール] メニューの [開発者ツール] をクリックするか、開発者ツール ウィンドウの右上角にある閉じるボタンをクリックするか、Internet Explorer のウィンドウまたは開発者ツールを開いたタブを閉じます。

Web ページのオブジェクトを選択する

多くの HTML および CSS 開発者ツールは、Web ページの個々の要素で動作します。 要素を選択するには、[HTML] タブで対象の要素を強調表示するか、開発者ツールの [検索] メニューの [クリックで要素を選択] をクリックします。 このボタンをクリックすると、マウスを使用して Web ページ上の要素を選択できます。 カーソルを要素の上へ移動します。青いボックスで要素の境界線が強調表示されたら、その要素をクリックして選択します。 次の図は、要素を選択した結果を示しています。

図 3. [クリックで要素を選択] および要素を選択した結果

HTML 要素を強調表示してクリックすると、[HTML] タブには選択した要素の属性が、Internet Explorer 8 による Web ページの表示に使用する内部表現での場所と共に表示されます。 要素の現在の属性値を表示し、[HTML] タブで新しい値に変更して試してみることができます。 属性値を変更するには、対象の値をクリックし、新しい値を入力してから Enter キーを押します。Internet Explorer 8 が変更の効果を表示します。 Esc キーを押して部分的な値を破棄できます。 Web ページを元の外観に戻すには、[ページを更新] をクリックします。

注 : [HTML] タブを使用して行った変更は、Web ページの現行ソースには影響を与えません。Web ページは最新の情報に更新するまで、またはブラウザーが新しい Web ページにナビゲートするかブラウザーを閉じるまで、そのままになります。 変更内容の保存については、下にある「変更の保存」の下のセクションを参照してください。

HTML 要素の検査

[HTML] タブは、Web ページでの HTML 要素のプレゼンテーションの検査に役立ちます。 [HTML] タブには、2 つの表示ウィンドウが用意されています。 左側のウィンドウは [Primary Content] ウィンドウで、右側のウィンドウは [プロパティ] ウィンドウです。

• [Primary Content] ウィンドウには、ドキュメント オブジェクト モデル (DOM) 全体が展開または折りたたみ可能なツリー ノード構造で表示されます。 このウィンドウを使用して、HTML ソースを調査および検査します。 HTML 要素の属性および値は、クリックすると編集可能になります。 テキスト ノードも、このモードで編集可能です。 ただし、エディター形式で Web ページ全体を編集する場合は、[編集] をクリックします。 編集モードでは、[右端で折り返す] が有効になっています。 また、このページのコンテンツが元のソースと完全に同じではないことがありますが、これは、その Web ページに対する Internet Explorer の内部表現になっているためです。 ページへのコンテンツの書き込みを行う JScript を呼び出した場合、この編集モードに表示されます。 編集が完了したら、再度 [編集] をクリックすると、変更内容が直ちに反映されます。
• [プロパティ] ウィンドウの上部には、[Property Type Chooser] メニュー バーが用意されています。 [Property Type Chooser] ではいくつかのツールが提供され、ソースの詳細な検査に役立ちます。 たとえば、[Primary Content] ウィンドウが DOM モードの場合は、任意の HTML 要素をクリックして選択し、検査できます。 要素をクリックすると、そのプロパティが [プロパティ] ウィンドウに表示されます。 情報の表示方法や表示内容は、そのとき選択しているプロパティの種類によって異なります。 たとえば、現在の種類が Style の場合、表示内容は、その要素に適用されている CSS ルールの一覧になります。 その他のプロパティの種類としては、トレース スタイル、レイアウト、および属性があります。

スタイル ツールおよびトレース スタイル ツールを使用する

スタイル ツールおよびトレース スタイル ツールが、選択した要素に適用されている CSS ルールを複数見つけた場合、CSS の仕様による特異性に基づいてルールが表示されます。 一覧の一番上にあるルールが選択した要素に最初に適用されていて、一番下にあるルールは、選択した要素のスタイル プロパティを現在定義しているルールです。 これらのルールの値は編集可能です。 編集するには、値をクリックして新しい値を入力し、Enter キーを押します。変更内容は直ちに Web ページに反映されます。 両方のプロパティ タイプにある情報は同じです。 ただし、トレース スタイル プロパティ タイプでは、同じ情報がプロパティごとにグループ化され、その下にルールが表示されています。 プロパティはアルファベット順に一覧になっていて、ルールは特異性に基づいた順序になっています。

レイアウト ツールを使用する

レイアウト ツールは、Web ページでの要素の相対配置に関するボックス モデル情報を提供します。 利用可能な情報を次に示します。

• オフセット : これらの値は、選択したオブジェクトとその親との距離を offsetLeft プロパティと offsetTop プロパティで表します。
• マージン、罫線、および余白 : これら 3 つの値は、Web ページのソースで指定された値を表示します。 値が指定されていない場合、ツールは Internet Explorer で使用する既定値を表示します。
• 幅および高さ : 最も内側の値は、offsetHeight プロパティおよび offsetWidth プロパティで定義された要素の高さと幅を表します。

各ボックス モデル属性には、値と単位が表示されます。 値をクリックして編集し、Enter キーを押して新しい値をコミットするか、Esc キーを押してキャンセルします。 Enter キーを押すと、新しい値がすぐに反映されます。 既定では (単位が表示されていない場合)、レイアウト ツールはボックス モデル値をピクセルとして処理します。

属性ツールを使用する

属性ツールは、HTML 要素の属性に名前/値のペアの一覧を提供します。 ダブルクリックすると、情報および属性の名前と値を検査できます。 属性の名前と値の情報も、クリックして [Primary Content] ウィンドウで編集できます。 属性の値は空白または null にできますが、属性の名前は空白にできません。 この情報を変更すると、直ちに Web ページに反映されます。 また、属性ツールでは、ウィンドウの一番上の該当するボタンをクリックして、要素に他の属性を追加したり、要素から属性を削除したりすることもできます。

CSS ルールの検査

[CSS] タブでは、スタイル シート間の相互作用がわかります。 サイトでは複数のスタイル シートを利用するのが最も有用です。 スタイル シート間で切り替えを行うには、[Style Sheet Chooser] をクリックします。 あるスタイル シートを選択すると、ルールおよびそれに関連付けられたスタイル プロパティが [Primary Content] ウィンドウに表示されます。 この情報は、スタイル ルールごとにグループ化されています。 既定では、このボタンをクリックすると、Web ページで参照される最初のスタイル シートが表示されます。 図 4 に示すとおり、スタイル シートのルールは、[Style Sheet Chooser] の下に表示されます。

図 4. CSS ツールは、Web ページが使用するすべてのスタイル シートで定義されているルールを表示します。

ルールのプロパティを展開または折りたたむには、+ 記号または - 記号の付いたボックスをクリックします。 このスタイル シート ビューのすべての要素は編集可能で、編集すると直ちにその内容が反映されます。 スタイル名の横にあるチェック ボックスをクリックすると、そのスタイル ルールをオンまたはオフにできます。 また、1 つのプロパティのオンまたはオフを切り替えるだけでなく、いくつかのプロパティをオンまたはオフにして、ルールでの効果を確認することもできます。

変更の保存

HTML ページおよび CSS ファイルへの変更が完了したら、[保存] をクリックして変更内容を保存します。 [名前を付けて保存] ダイアログ ボックスでは、ファイルを .html または .css ではなく .txt で保存するように求められます。 これは、メインのソース ファイルを誤って上書きしないようにするためです。また、開発者ツールで行ったすべての変更は、元のソースの内容ではなく、Web ページに対する Internet Explorer の内部表現であるため、このような処理になっています。 このことから、現在の Web ページを最新の情報に更新したり、別のページにナビゲートしたり、変更をすべて元に戻したりすると、ページは元の Web ページのコンテンツに戻ります。

注 : 開発者ツールを利用しているときは、Web ページの変更した領域だけがソースとは異なるわけではなく、他の部分も異なっていることに注意します。これは、開発者ツールがソース内ではなく Internet Explorer 内に存在する Web ページを表示しているためです。 誤ってソースを上書きしないように、開発者ツールでは出力がテキストとして保存され、ファイルには行間コメントが追加されます。

まとめ

Internet Explorer 8 開発者ツールは、Web ページ関連の問題のトラブルシューティングおよび解決に役立ちます。 HTML ツールでは、Web ページ上の個々の HTML 要素の特定の属性およびプロパティに注目できます。 CSS ツールは、より広範囲なビューを提供し、スタイル シート内のさまざまなルールやプロパティが Internet Explorer 8 でどのように解釈されるのかを示すことができます。開発者ツールでソースに加えた変更は、Web サイトに対する Internet Explorer の内部表現にのみ影響を与え、元のソースには直接影響を与えないため、変更内容を保存してソースを更新できるように [保存] が用意されています。 これによって時間が短縮され、Web ページの保守効率を向上させます。

関連トピック

• 開発者ツールを使用したスクリプトのデバッグ
• 開発者ツールを使用したスクリプトのプロファイリング
• 開発者ツールのユーザー インターフェイス リファレンス (英語の可能性あり)
• 開発者ツール キーボード ショートカット リファレンス (英語の可能性あり)
• ドキュメント互換性の定義 (英語の可能性あり)
• プロセス デバッグ マネージャー (英語の可能性あり)
• Windows スクリプト インターフェイス (英語の可能性あり)