CSS の概要: CSS で改善できる点を特定する
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
[CSS の概要] パネルでは、ページの CSS について理解を深め、改善の余地がある要素を把握できます。
[CSS の概要] パネルを開く
- こちらのページなどのウェブページを開きます。
- DevTools を開きます。
[DevTools のカスタマイズと制御] > [その他のツール] > [CSS の概要] を選択します。
または、コマンド メニューを使用して [CSS の概要] パネルを開きます。
CSS サマリー レポートを作成して再作成する
[概要をキャプチャ] ボタンをクリックして、ページの CSS 概要レポートを生成します。
CSS の概要を再実行するには、 [概要をクリア] アイコンをクリックし、最初の手順を繰り返します。
CSS サマリー レポートについて
レポートは 5 つのセクションで構成されています。
- 概要。ページの CSS の概要です。
色。ページのすべての色。色は、背景色やテキストの色などの種類ごとにグループ化されます。このセクションには、コントラストの低いテキストも表示されます。
それぞれの色はクリック可能です。たとえば、#DADCE0
の枠線の色がサイトのカラーパターンと一致していないとします。この色を使用している要素のリストを取得するには、色をクリックします。
ページ上の要素をハイライト表示するには、リスト内の要素にカーソルを合わせます。
[要素] パネルで要素を開くには、リスト内の要素をクリックします。
フォント情報。ページ上のすべてのフォントとその箇所。フォントサイズ、フォントの太さ、行の高さでグループ化されています。[色] セクションと同様に、影響を受ける要素のリストを表示するには、出現回数をクリックします。
使用されていない宣言。効果のないすべてのスタイル(理由別)。
たとえば、上記の 2 つの宣言は、コンテンツによってインライン要素の高さと幅が決まるため、使用されていません。対応する要素を表示するには、発生回数をクリックします。
メディアクエリ。ページで定義されたすべてのメディアクエリ。発生回数の降順で表示されます。影響を受ける要素のリストを表示するには、各要素の箇所をクリックします。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2021-10-21 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]