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

Jecelyn Yeen 氏

[CSS の概要] パネルでは、ページの CSS について理解を深め、改善の余地がある要素を把握できます。

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

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

  3. より多く。 [DevTools のカスタマイズと制御] > [その他のツール] > [CSS の概要] を選択します。

    [CSS の概要] がメニューにあります。

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

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

CSS サマリー レポートを作成して再作成する

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

    CSS の概要をキャプチャします。

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

    概要を消去。

CSS サマリー レポートについて

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

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

  2. 色。ページのすべての色。色は、背景色やテキストの色などの種類ごとにグループ化されます。このセクションには、コントラストの低いテキストも表示されます。

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

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

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

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

    要素にカーソルを合わせると、ページ上の要素がハイライト表示されます。

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

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

    フォント情報。

  4. 使用されていない宣言。効果のないすべてのスタイル（理由別）。

    未使用の宣言。

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

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

    メディアクエリ。