CSS の概要: CSS で改善できる点を特定する

Jecelyn Yeen

[CSS の概要] パネルを使用すると、ページの CSS について理解を深め、改善できる点を特定できます。

[CSS の概要] パネルを開く

  1. こちらのページなど、任意のウェブページを開きます。
  2. DevTools を開きます。

  3. その他。 [Customize and control DevTools] > [More tools] > [CSS Overview] を選択します。

    [CSS の概要] をクリックします。

    または、コマンド メニューを使用して [CSS Overview] パネルを開きます。

    コマンド メニューに「CSS の概要」コマンドを表示します。

CSS 概要レポートを実行して再実行する

  1. [概要を取得] ボタンをクリックして、ページの CSS 概要レポートを生成します。

    CSS の概要を取得する。

  2. CSS の概要を再実行するには、消去] をタップします。 [Clear Overview] アイコンをクリックして、最初の手順を繰り返します。

    概要を消去。

CSS サマリー レポートについて理解する

このレポートは次の 5 つのセクションで構成されています。

  1. 概要。ページの CSS の概要。 概要。

  2. 色。ページのすべての色。色は、背景色、テキストの色などのタイプ別にグループ化されます。このセクションには、コントラストが低い問題があるテキストも表示されます。

    カラー] をタップします。

    各色はクリック可能です。たとえば、#DADCE0 の枠線の色がサイトのカラーパターンと一致していないとします。この色を使用している要素のリストを表示するには、その色をクリックします。

    色を使用する要素のリスト。

    ページ上の要素をハイライト表示するには、リスト内の要素にカーソルを合わせます。

    要素にカーソルを合わせて、ページ上の要素をハイライト表示します。

    [要素] パネルで要素を開くには、リスト内の要素をクリックします。

  3. フォント情報。ページ上のすべてのフォントと出現箇所。フォントサイズ、フォントの太さ、行の高さでグループ化されています。[色] セクションと同様に、影響を受ける要素のリストを表示するには、該当する要素をクリックします。

    フォント情報。

  4. 未使用の宣言。影響がないすべてのスタイル（理由別にグループ化）。

    使用されていない宣言。

    たとえば、上記の 2 つの宣言は、コンテンツによってインライン要素の高さと幅が決まるため、使用されていません。対応する要素を表示するには、そのオカレンスをクリックします。

  5. メディアクエリ。ページで定義されているすべてのメディアクエリ。発生回数の降順で並べ替えられています。影響を受ける要素のリストを表示するには、該当する要素をクリックします。

    メディアクエリ。