インスペクタ

ページの構造やレイアウトの調査や変更を行うために、インスペクタを使用しましょう。

インスペクタを開く

インスペクタを開く方法がいくつかあります:

"Web 開発" メニュー (Mac では、"ツール" メニューのサブメニューです) で、"インスペクタ" を選択します。
Ctrl-Shift-C (Mac OS X や Linux では Cmd-Option-C) を押下します。
Web ページ上の要素を右クリックして、"要素を調査" を選択します。

インスペクタがアクティブになっているツールボックスが、ブラウザウィンドウの下部に現れます。

"要素を調査" をクリックしてインスペクタを起動するとその要素は選択済みの状態であり、またインスペクタは後述する "要素の選択" のような表示および動作になります。

他の方法で起動した場合は、ページ上でマウスを動かすのに応じてマウスポインタの下にある要素を点線の枠で強調するとともに、要素の HTML タグを吹き出しの注釈で表示します。また同時に文脈中の HTML 定義箇所を、インスペクタの左側ペインで表示します。Firefox 30 より、要素と要素のボックスモデルを示すグリッド線も表示します:

クリックした要素は選択されます。要素を選択すると、インスペクタは "要素の選択" で示したような表示および動作になります。

要素の選択

要素を選択すると、そのマークアップがインスペクタの左側にある HTML ペインでハイライトされ、また右側の CSS ペインで要素のスタイル情報を表示します:

Firefox 29 で要素選択の動作が大きく変わりました。また、Firefox 30 よりインスペクタがページ内に要素のボックスモデルを表示します。

Firefox 29 より前

ページ内でクリックすることにより要素を選択するとインスペクタはその要素で表示をロックしますので、インスペクタが別の要素に切り替わってしまうことなくマウスを移動できます。

要素の注釈を表示する吹き出しは、左右にボタンが表示されます。左側のボタンは要素のロックを解除して、ページ内の別の要素を選択できるようにします。右側のボタンは対象要素向けのポップアップメニューを表示します。

Firefox 29

Firefox 29 ではページ内の要素の周りに点線の枠および吹き出しが表示され、それらは要素が選択されると非表示になります。また、インスペクタは選択された要素でのロックを行いません。HTML ペインのマークアップ上でマウスを動かすと、対応する要素の周りに点線の枠を表示します。Web ページ内で別の要素を選択するには、ツールボックスのツールバー上にある "要素を選択" ボタンをクリックしてください:

Firefox 30 以降

Firefox 30 より、選択時の動作は Firefox 29 と同じですが、インスペクタがページ内に要素のボックスモデルとグリッド線を表示します:

要素のポップアップメニュー

ポップアップメニューを使用して、特定のノード上である程度共通的なタスクを実行できます。メニューは HTML ペインで要素をコンテキストクリックすると現れます:

このメニューは以下の項目があります:

要素の HTML を編集する
要素の innerHTML または outerHTML をコピーする
要素を一意に選択する CSS セレクタをコピーする
要素を削除する
:hover、:focus、または :active CSS 疑似クラスを設定する

画像を data URL としてコピー

Data URL としてコピーは Firefox 29 の新機能です。

Firefox 29 より選択した要素が画像である場合に、画像を data URL としてクリップボードにコピーする項目がポップアップメニューへ加わります:

HTML として編集

要素の outerHTML を編集するには、要素のポップアップメニューを開いて "Edit As HTML" を選択します。HTML ペイン内にテキストボックスが現れます:

ここに任意の HTML を追加できます。要素のタグを変更する、既存の要素を変更する、新たな要素を追加するといったことが可能です。ボックスの外部をクリックすると、変更点をページに適用します。

HTML ペイン

HTML ペインはページの HTML をツリー上に表示します。各ノードの左側に三角印があります。この印をクリックすると、ノードを展開します。Firefox 31 より、Alt キーを押しながら三角印をクリックすると配下のノードをすべて展開します。選択した要素の開始タグと終了タグは、灰色の背景色で強調されます。

このペインで HTML (タグ、属性、内容物) を直接編集できます: 編集したい要素をクリックして、変更して、Enter キーを押下すると、変更点は直ちに反映されます。

要素をコンテキストクリックすると、要素の吹き出しで表示できるものと同じポップアップメニューを表示します。

HTML ペインのツールバー

ペインの上部には、3 つのセクションに分けられた専用ツールバーがあります:

Firefox 29 より、"要素を選択" ボタンがツールボックスに移動しました。

要素の選択: このボタンをクリックすると、ブラウザウィンドウ内でマウスを動かすことによって別の要素を選択できます。
HTML パンくずリスト: 選択した要素を包含する枝に向かう、ドキュメント内の階層全体を表示します。リスト上のいずれかの要素をクリックアンドホールドすると、隣接する要素のいずれかを選択できるポップアップメニューが表示されます。リストが表示領域より長くなっているときは、リストの左端と右端にある小さな矢印アイコンをクリックしてスクロールできます。
タグの検索: 入力したタグをページ内で検索します。"Enter" を押下すると次の項目を検索します。

CSS ペイン

CSS ペインでは、現在選択している要素に適用されているスタイルに関する情報を表示します。このペインは 4 つのビューに分けられています: "ルール"、"計算済み"、"フォント"、"ボックスモデル" です。ペイン上部のツールバーでこれらのビューを切り替えることができます:

ルールビュー

このビューでは選択した要素に適用しているすべてのルールを、もっとも具体的なものからあいまいなものの順に並べています:

ルールビューでは疑似要素および疑似要素に適用している規則も表示します。

ルールの表示

ここでは各規則を、セレクタのリストと property:value; の宣言という形式で、スタイルシートのように表示します。

後の規則でオーバーライドされる規則には、打ち消し線が引かれます。規則の上にマウスポインタをのせると、隣にチェックボックスが表示されます: このチェックボックスで規則の有効・無効を切り替えできます。

CSS ファイルへのリンク

各規則の右上に、ソースファイルの名前と行番号をリンクとして表示します。このリンクをクリックすると、ファイルをスタイルエディタで開きます。

Firefox 29 より、インスペクタは CSS ソースマップを理解します。ソースマップをサポートする CSS プリプロセッサを使用しており、またスタイルエディタの設定でソースマップのサポートを有効にしている場合は、リンクが生成された CSS ではなく元のソースファイルへのリンクになります:

CSS ソースマップのサポートについて、詳しくはスタイルエディタのドキュメントをご覧ください。

カラーサンプル

Firefox 27 より、色の値の隣に色のサンプルを表示します:

カラーピッカー

色サンプルをクリックすると、その色を変更できるカラーピッカーがポップアップします:

Firefox 31 より、カラーピッカーに Eyedropper のアイコンが加わりました。このアイコンをクリックすると、要素の色をページ内から新たに選択するスポイトツールを使用できます。:

背景画像のプレビュー

background-image の規則にマウスポインタを載せたときに、指定した画像のプレビューを表示します:

Transform の可視化

ルールビューで transform プロパティにマウスポインタを載せると、実行される変形を可視化するツールチップを表示します:

Firefox 30 の新機能です。

Firefox 30 より、ルールビューで font-family プロパティにマウスポインタを載せると、フォントのサンプルをツールチップで表示します:

規則の編集

宣言をクリックするとそのプロパティや値を編集でき、またその結果を直ちに確認できます。新しい宣言を規則に追加するには、規則の最後の行 (閉じ括弧がある行) をクリックします。プロパティに対して不正な値や未知のプロパティ名を編集中に入力すると、宣言の後ろに黄色の警告アイコンが現れます。

実施した変更は一時的なものです: ページを再読み込みすると、元のスタイルに戻ります。

ヒント: 編集時は、矢印キーで数値の増減が可能です。上矢印キーで "1px" を 2px に、また Shift+ 上矢印/下矢印で 10 増減します。また Alt + 上/下で値を 0.1 変更、さらに Shift+Page Up/Down で元の値から 100 増減します。

計算済みビュー

このビューでは、要素のスタイルをプロパティ別にまとめています。ここでは要素に対して適用されているすべての CSS プロパティを、アルファベット順に並べています: 選択した要素に対して各 CSS プロパティが持っている計算値を表します:

プロパティ名の隣にある三角印をクリックすると、その値を設定した規則およびその規則ソースファイル名と行番号を表示します:

デフォルトでは、ページで明示的に設定された値のみ表示します。すべての値を見る場合は、"ブラウザ CSS" チェックボックスをクリックしてください。

検索ボックスに入力することでリアルタイムに一覧の絞り込みが行われます。例えばフォント関連の設定内容だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティだけが表示されます。同様に、プロパティの値も検索できます: フォントを "Lucida Grande" に設定した規則を探す場合は、そのフォント名を検索ボックスに入力します。

フォントビュー

このビューでは、選択した要素で使用しているすべてのフォントを表示します。これはあなたのシステムで使用されたフォントを表示しており、CSS で指定されたフォントとは異なる可能性があることに注意してください:

フォントビューのデフォルトのテキストは "Abc" ですが、実はテキストエリアですので自由に編集できます。

ボックスモデルビュー

このビューでは、要素に適用されているものと同じボックスモデルをグラフィカルに表現します。Firefox 30 より、ボックスモデルビュー内にマウスポインタがあるときに、ページ内にグリッド線と要素のボックスモデルを表示します:

ボックスモデルビューの詳細

Firefox 30 より前のボックスモデルビューは以下のとおりです:

左上に、ページ上でその要素が占める総領域を表示します。
外側にある数値は、要素の各辺のマージンのサイズです。
ボーダー上の四角の中にある数値は、各辺のボーダーの幅を表します。
内側の層で、要素の各辺のパディングのサイズを表示します。
最後に、中央に要素の内容物のサイズがあります。

Firefox 30 以降はシンプルになりました:

左上に、引き続きページ内でその要素が占める領域を表示します (内容物 + パディング)。
中央に、引き続き内容物のサイズを表示します。
右上に、position プロパティの値を表示します。
パディング、ボーダー、マージンの各値は、それぞれが置かれる場所に表示します。

Firefox 31 より、ボックスモデルビューでいずれかの値をクリックすると値を変更でき、その結果がページ内に反映されます。