CSS の調査と編集

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

CSS ルールの調査

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

未サポートや無効なスタイルの隣に、警告アイコンを表示します。これにより、あるスタイルがなぜ適用されないかを知る助けになります:

ルールの表示

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

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

Firefox 52 より display: grid 宣言がある要素で、グリッドのアイコン () が表示されます。このアイコンをクリックすると、グリッドラインやグリッドトラックを含むグリッドの状態を、ページに重ねて表示します。詳しくはグリッドレイアウトを調査するをご覧ください。

ユーザーエージェントのスタイル (すなわち、ブラウザーのデフォルトの CSS ルール) を表示するには、開発ツールのオプションパネルで "ブラウザー CSS を表示" を有効化します (この設定は計算済みビューの [ブラウザー CSS] チェックボックスとは独立した設定ですので注意してください)。

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

要素 {} ルール

ルール一覧の先頭にある 要素 {} ルールは、本物の CSS ルールではありません。これは、要素の style 属性で割り当てられた CSS プロパティを表します。

Firefox 52 より標的のアイコン () も表示しており、これはページで現在選択している要素を強調表示するための便利な手段です。

ルールのフィルタリング

ルールビューの上部に "スタイルを絞り込み" と記載されたボックスがあります:

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

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

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

ルールビューで Ctrl / Cmd + F を押下すると、検索フィールドにフォーカスがあたります。フィルターを入力した後、Esc を押下すると入力内容を削除できます。

厳密な検索

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

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

ショートハンドプロパティを展開する

ショートハンドプロパティのそばにある三角印をクリックすると、関連するロングハンドプロパティを表示するように展開できます。

疑似要素を表示する

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

::after ::backdrop ::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 を設定する

フィルターボックスの右側にボタンがあります:

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

この機能は、HTML ビューのポップアップメニューから使用することもできます。

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

CSS ファイルへのリンク

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

ソースファイルの場所をコピーできます。リンクを右クリックして [URL をコピー] を選択してください。

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

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

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

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

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

計算済み CSS の調査

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

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

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

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

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

計算済みビューで Ctrl / Cmd + F を押下すると、検索フィールドにフォーカスがあたります。フィルターを入力した後、Esc を押下すると入力内容を削除できます。

ルールの編集

ルールビューで宣言またはセレクターをクリックすると、ルールを編集して結果を直ちに確認できます。また、Tab を使用して別の既存プロパティや値を選択でき、Enter または Space を押下するとそれらを編集できます。新しい宣言をルールに追加するには、ルールの最後の行 (閉じ括弧がある行) をクリックします。

プロパティ名を入力するのに応じて、オートコンプリート候補のリストを表示します。Tab を押下して現在の候補を受け入れるか、↑ および ↓ を押下してリスト内を移動します。デフォルトで選択される項目は、入力した文字から始まるプロパティでもっとも一般的なものです。例えばユーザが "c" を入力すると、デフォルトで "color" を選択します:

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

ルールビューで編集した内容がスタイルエディターに反映されます。逆も同様です。実施した変更点は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。

CSS を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:

CSS 変数のオートコンプリート

CSS で定義した変数に応じて、CSS 変数名のオートコンプリートを行います。プロパティの値に var( と入力してダッシュ (-) を押下すると、CSS で宣言した変数をオートコンプリートのリストに表示します。Firefox 61 より、それぞれの変数にどの色の値が保存されているかを明確にするために色見本を表示します。

さらに、CSS 変数名にマウスポインターを載せると、変数に保存されている色の値をツールチップで表示します (バグ 1431949)。

キーボードショートカットで編集する

編集中は、矢印キーや Page Up/Down キーを (ほかのキーと組み合わせて) 使用して数値のルールを増減できます:

↑ 矢印キーで値を 1 増やします (例えば "1px" が "2px" に変わります)。
Shift + ↑/↓ で値を 10 増減します。
Alt + ↑/↓ で値を 0.1 増減します。Firefox 60 でこの組み合わせを、Linux および Windows で OS のデフォルトのショートカットと衝突しないようにするため Ctrl + ↑/↓ に変更しましたので注意してください (バグ 1413314)。Mac では変わりません。macOS は Ctrl + ↑ がデフォルトで、Mission Control を表示するショートカットキーです。
Shift + Page up/Page down で値を 100 増減します。

ルールの追加

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

また、同じことができるボタンもあります:

ルールをコピーする

ルールビューのコンテキストメニュー項目を使用して、ルールやルールの一部分をコピーできます:

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