[CSS の概要] パネルでは、ページの CSS について理解を深め、改善の余地がある要素を把握できます。
[CSS の概要] パネルを開く
- こちらのページなどのウェブページを開きます。
- DevTools を開きます。
[DevTools のカスタマイズと制御] > [その他のツール] > [CSS の概要] を選択します。
または、コマンド メニューを使用して [CSS の概要] パネルを開きます。
CSS サマリー レポートを作成して再作成する
[概要をキャプチャ] ボタンをクリックして、ページの CSS 概要レポートを生成します。
CSS の概要を再実行するには、 [概要をクリア] アイコンをクリックし、最初の手順を繰り返します。
CSS サマリー レポートについて
レポートは 5 つのセクションで構成されています。
- 概要。ページの CSS の概要です。
色。ページのすべての色。色は、背景色やテキストの色などの種類ごとにグループ化されます。このセクションには、コントラストの低いテキストも表示されます。
それぞれの色はクリック可能です。たとえば、
#DADCE0
の枠線の色がサイトのカラーパターンと一致していないとします。この色を使用している要素のリストを取得するには、色をクリックします。ページ上の要素をハイライト表示するには、リスト内の要素にカーソルを合わせます。
[要素] パネルで要素を開くには、リスト内の要素をクリックします。
フォント情報。ページ上のすべてのフォントとその箇所。フォントサイズ、フォントの太さ、行の高さでグループ化されています。[色] セクションと同様に、影響を受ける要素のリストを表示するには、出現回数をクリックします。
使用されていない宣言。効果のないすべてのスタイル(理由別)。
たとえば、上記の 2 つの宣言は、コンテンツによってインライン要素の高さと幅が決まるため、使用されていません。対応する要素を表示するには、発生回数をクリックします。
メディアクエリ。ページで定義されたすべてのメディアクエリ。発生回数の降順で表示されます。影響を受ける要素のリストを表示するには、各要素の箇所をクリックします。