MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS の調査と編集

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

CSS ルールの調査

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

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

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

ルールの表示

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

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

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

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

要素 {} ルール

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

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

ルールのフィルタリング

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

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

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

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

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

デフォルトで検索ボックスは、文字列を一部に含むすべての宣言を強調表示します。例えば "color" を検索すると、color だけでなく border-bottom-colorbackground-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 ビューのポップアップメニュー から使用することもできます。

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

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

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

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

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

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

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

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

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" を選択します:

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

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

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

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

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

ルールの追加

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

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

ルールをコピーする

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

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

関連情報

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

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss
 最終更新者: yyss,