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