Your Search Results

    インスペクタ

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

    インスペクタを開く

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

    • "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; の宣言という形式で、スタイルシートのように表示します。

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

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

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

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

    カラーサンプル

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

    カラーピッカー

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

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

    背景画像のプレビュー

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

    Transform の可視化

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

    font-family ツールチップ

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

    インスペクタと Web コンソールを併用する

    インスペクタで選択されている要素は Web コンソール内の JavaScript で、変数 $0 を使用して参照できます。

    さらに Firefox 30 より、Web コンソールの出力で要素にマウスポインタを載せると、画面上で強調表示します:

    開発者向け API

    Firefox アドオンは、chrome://browser/content/devtools/inspector/inspector.xul コンテキストから以下のオブジェクトにアクセスできます:

    window.inspector

    inspector-panel.js で定義しています。属性と関数:

    • .selection - インスペクタで選択したもの関する情報:
      • .isNode() - 選択したものがノードである場合に true を返します。
      • .node - ページから実際の要素を返します。
      • .window - 選択したものが含まれているフレームの window オブジェクトです。
    • .markDirty() - インスペクタによって変更されたページをマークします。インスペクタで行った変更は再読み込みによって書き換えられるため、ページから去るときに警告を表示します。

    バインド可能なイベント:

    markuploaded

    ページを変更した後、左側パネルが更新されたときに呼び出されます。

    ready

    最初の markuploaded で呼び出されます。

    pseudoclass

    疑似クラスの切り替え後に呼び出されます。

    layout-change

    "描画やリサイズなどのための、低優先度の変更イベント"

    キーボードショートカット

      Windows Mac OS X Linux
    インスペクタを開く Ctrl + Shift + C Cmd + Opt + C Ctrl + Shift + C

    HTML ペイン

    これらのショートカットは、インスペクタの HTML ペイン内で動作します。

      Windows Mac OS X Linux
    選択中のノードを削除する Delete Delete Delete
    ノードの削除を元に戻す Ctrl + Z Cmd + Z Ctrl + Z
    ノードの削除をやり直す Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
    次のノードへ移動する (展開しているノードに限る)
    前のノードに移動する
    選択中のノードを展開する
    選択中のノードを閉じる
    ノード内で次の属性へ移動する Tab Tab Tab
    ノード内で前の属性へ移動する Shift + Tab Shift + Tab Shift + Tab
    選択中の属性の編集を開始する Enter Enter Enter
    選択中のノードを隠す/表示する H H H
    HTML ペインの検索ボックスにフォーカスを移動する Ctrl + F Cmd + F Cmd + F
    HTML として編集 F2 F2 F2

    CSS ペイン

    これらのショートカットは、インスペクタの CSS ペイン内で動作します。

      Windows Mac OS X Linux
    次のプロパティや値に移動する Tab Tab Tab
    前のプロパティや値に移動す Shift + Tab Shift + Tab Shift + Tab
    選択中の値を 1 増やす
    選択中の値を 1 減らす
    選択中の値を 10 増やす Shift + ↑ Shift + ↑ Shift + ↑
    選択中の値を 10 減らす Shift + ↓ Shift + ↓ Shift + ↓
    選択中の値を 0.1 増やす Alt + ↑ Opt + ↑ Alt + ↑
    選択中の値を 0.1 減らす Alt + ↓ Opt + ↓ Alt + ↓

    共通ショートカット

    これらのショートカットは、ツールボックス内の全ツールで動作します。

      Windows Mac OS X Linux
    フォントサイズを拡大する Ctrl + + Cmd + + Ctrl + +
    フォントサイズを縮小する Ctrl + - Cmd + - Ctrl + -
    フォントサイズのリセット Ctrl + 0 Cmd + 0 Ctrl + 0

    添付ファイル

    ファイル サイズ 日時 添付者:
    inspector-console
    83006 バイト 2013-06-28 20:19:18 wbamberg
    inspector-css-rules-singlerule-annotated
    30785 バイト 2013-07-24 11:29:14 wbamberg
    inspector-css-box-model-annotated
    170505 バイト 2013-07-24 14:35:35 wbamberg
    inspector-css-color-swatch
    28205 バイト 2013-10-28 20:58:00 wbamberg
    inspector-element-annotation
    24344 バイト 2014-02-06 10:33:24 wbamberg
    inspector-css-sourcemap
    27768 バイト 2014-02-07 00:14:31 wbamberg
    inspector-copyasdatauri
    88648 バイト 2014-02-07 16:05:17 wbamberg
    transform-tooltip
    122622 バイト 2014-02-11 10:33:59 wbamberg
    font-family-tooltip
    37115 バイト 2014-03-19 16:41:07 wbamberg
    inspector-box-model-detail
    17570 バイト 2014-03-21 20:56:56 wbamberg
    inspector-box-model-view
    286546 バイト 2014-03-21 20:57:08 wbamberg
    inspector-computed-view
    96441 バイト 2014-03-21 20:57:32 wbamberg
    inspectr-computed-view-open
    98498 バイト 2014-03-21 20:57:43 wbamberg
    inspector-css-toolbar
    94472 バイト 2014-03-21 20:57:55 wbamberg
    inspector-fonts-view
    94855 バイト 2014-03-21 20:58:05 wbamberg
    inspector-editHTML
    27031 バイト 2014-03-21 20:58:15 wbamberg
    inspector-HTML-pane
    118883 バイト 2014-03-21 20:58:28 wbamberg
    inspector-html-toolbar-annotated
    97507 バイト 2014-03-21 20:58:40 wbamberg
    inspector-image-preview
    271710 バイト 2014-03-21 20:58:51 wbamberg
    inspector-opening
    336974 バイト 2014-03-21 20:59:00 wbamberg
    inspector-popup
    78992 バイト 2014-03-21 20:59:08 wbamberg
    inspector-selected-annptated
    370772 バイト 2014-03-21 20:59:32 wbamberg
    inspector-web-console
    282400 バイト 2014-03-21 20:59:53 wbamberg
    inspector-color-picker
    128338 バイト 2014-05-02 16:58:40 wbamberg

    Document Tags and Contributors

    Contributors to this page: yyss
    最終更新者: yyss,