CSS の調査と編集

CSS ペインで、ページの CSS の調査や編集を行えます。

CSS ルールの調査

ルールビューでは選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:

開発ツールのオプションで設定されている場合に、ルールビューでユーザエージェントのスタイル (ブラウザが適用するスタイル) を表示します。この設定は計算済みビューの "ブラウザ CSS" チェックボックスとは独立した設定ですので注意してください。

Firefox 44 より、未サポートや無効なものを含むすべての作成者によるスタイルを、ルールビューで表示します。これにより、あるスタイルがなぜ適用されないかを知る助けになります:

ルールの表示

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

• 一致する要素を強調: セレクタの隣に、標的のアイコンがあります。これをクリックすると、ページ内でセレクタにマッチするすべてのノードを強調表示します。
• オーバーライドされた宣言: 後のルールでオーバーライドされた宣言には、打ち消し線が引かれます。オーバーライドされた宣言をご覧ください。
• カスケードを表示: オーバーライドされた宣言の隣に、拡大鏡のアイコンがあります。これをクリックすると、オーバーライドされたプロパティを含むルールのカスケード状況を確認できます。オーバーライドされた宣言をご覧ください。
• 有効/無効: 宣言の上にマウスポインタを載せると、隣にチェックボックスが表示されます。このチェックボックスで宣言の有効・無効を切り替えできます。
• ファイル名と行番号: 右側に、ルールへのリンクがあります。詳しくは CSS ファイルへのリンクをご覧ください。

ユーザエージェントのスタイルは背景が異なり、ファイル名と行番号のリンクに接頭辞 (ユーザエージェント) がつきます:

ルールのフィルタリング

Firefox 40 より、ルールビューの上部に "Filter Styles" と記載されたボックスがあります:

ここに入力すると以下のようになります:

• 入力した文字列を含まないルールは、すべて非表示になります。
• 入力した文字列を含む宣言をハイライト表示します。

検索ボックス末尾の "X" 印をクリックすると、フィルタを削除します。

厳密な検索

デフォルトで検索ボックスは、文字列を一部に含むすべての宣言を強調表示します。例えば "color" を検索すると、color だけでなく border-bottom-color や background-color を含む宣言も強調表示します:

Firefox 43 より、`color` のように検索語をバッククォートで括ると、完全一致に限定して検索します:

疑似要素を表示する

Firefox 41 より、選択した要素に以下の疑似要素が適用されている場合に、それらをルールビューで表示します:

::after
::backdrop (Firefox 46 の新機能)
::before
::first-letter
::first-line
::selection
:-moz-color-swatch
:-moz-number-spin-box
:-moz-number-spin-down
:-moz-number-spin-up
:-moz-number-text
:-moz-number-wrapper
:-moz-placeholder
:-moz-progress-bar
:-moz-range-progress
:-moz-range-thumb
:-moz-range-track
:-moz-selection

選択した要素に適用している疑似要素がある場合は、選択した要素より前にそれらを表示します。ただし、展開しない状態で隠されています:

三角印をクリックすると、疑似要素を表示します:

:hover、:active、:focus を設定する

Firefox 41 より、フィルタボックスの右側に新たなボタンがあります:

ボタンをクリックすると 3 つのチェックボックスが現れます。これを使用して、選択した要素に :hover、:active、:focus の各疑似クラスを設定できます:

このボタンは Firefox 41 の新機能ですが、疑似クラスの設定機能自体は、以前の Firefox から搭載されていました。以前は (また現在でも) HTML ビューのポップアップメニューからアクセスできました。

Firefox 43 より、いずれかの疑似クラスを設定するとマークアップビューで、疑似クラスが適用されたすべてのノードの隣に橙色の印を表示します:

CSS ファイルへのリンク

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

Firefox 41 より、ソースファイルの場所をコピーできます。リンクを右クリックして "Copy Location" を選択してください。

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

CSS プロパティのヘルプを参照する

Firefox 40 より、ルールビューで CSS プロパティ名をコンテキストクリックすると、MDN から取得したプロパティのヘルプを表示するポップアップウィンドウを開くことができます:

現在は MDN の応答をキャッシュしないため、ネットワーク接続が必要であることに注意してください。

オーバーライドされた宣言

CSS 宣言がよりウェイトの大きい別の CSS ルールにオーバーライドされた場合、オーバーライドされた宣言に打ち消し線を表示します。

Firefox 43 より、オーバーライドされた宣言の隣に拡大鏡のアイコンがあります。アイコンをクリックすると、カレントノードに適用されているプロパティで、同じプロパティを設定しようとしたものだけを表示するようにルールビューをフィルタリングします。よって、そのプロパティのカスケードの全体像です。

どのルールが宣言をオーバーライドしているかを、簡単に確認できます:

計算済み CSS の調査

選択した要素向けに計算された CSS を確認するには、計算済みビューに切り替えてください。ここでは選択した要素について、各 CSS プロパティの計算済みの値を表示します:

Tab を使用して、これらを選択できます。また Firefox 49 より、これらのプロパティについて詳しい情報を確認できます。プロパティを選択して F1 を押下すると、MDN のリファレンスページが開きます。

プロパティ名の隣にある三角印をクリックする (または選択中に Enter または Space を押下する) と、その値を設定したルールおよびそのルールが存在するソースファイルのファイル名と行番号を表示します:

デフォルトでは、ページで明示的に設定された値のみ表示します。すべての値を見るには、"ブラウザ CSS" チェックボックスをクリックしてください。Tab を使用してファイル名/行番号に移動できます。そして Enter/Return を押下すると、関連するファイルをスタイルエディタで開きます。

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

ルールの編集

ルールビューで宣言またはセレクタをクリックすると、ルールを編集して結果を直ちに確認できます。また、Tab を使用して別の既存プロパティや値を選択でき、Enter または Space を押下するとそれらを編集できます。

新しい宣言をルールに追加するには、ルールの最後の行 (閉じ括弧がある行) をクリックします。

プロパティ名を入力するのに応じて、オートコンプリート候補のリストを表示します。Tab を押下して現在の候補を受け入れるか、↑ および ↓ を押下してリスト内を移動します。

Firefox 48 より、入力した文字から始まるプロパティでもっとも一般的なものをデフォルトで選択します。例えばユーザが "c" を入力すると、デフォルトで "color" を選択します:

プロパティに対して無効な値や未知のプロパティ名を編集中に入力すると、宣言の後ろに黄色の警告アイコンを表示します。

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

編集中は、矢印キーで数値の増減が可能です。↑ キーで "1px" を 2px に、また Shift + ↑/↓ で 10 増減します。Alt + ↑/↓ で値を 0.1 変更、Shift + Page up/Page down で 100 増減します。

Firefox 44 より、ルールビューで編集した内容がスタイルエディタに反映されます。逆も同様です。

ルールの追加

ルールビューでルールを追加できます。右クリックで表示されるコンテキストメニューで "ルールを追加" を選択してください。選択中のノードにマッチするセレクタの配下に、新たな CSS ルールを追加します。

Firefox 41 より、同じことができるボタンがあります:

ルールをコピーする

Firefox 41 よりルールビューのコンテキストメニューに、ルールやルールの部品をクリップボードにコピーするためのメニュー項目を追加しました:

• ルールをコピー
• セレクタをコピー
• プロパティ宣言をコピー
• プロパティ名をコピー
• プロパティの値をコピー

関連情報

• インスペクタのすべてのキーボードショートカットの一覧
• インスペクタには、色・フォント・アニメーションといった個々の CSS 機能を扱うことに特化したツールがあります。これらのツールについては、ハウツーガイドをご覧ください。