CSS Overviewの使い方

このサイトを検索 | Atom | RSS

お知らせ！

「CSS Overview」は標準機能になりました。

この投稿はリニューアルしたので、新しい記事をお読みください。

リニューアルした記事はこちらです。↓

CSS Overviewとは？使い方とできることを整理【Chrome DevToolsでCSSを可視化】

Chrome DevToolsの「CSS Overview」の使い方とできることを解説。カラーやフォントの分析、未使用CSSの検出など、スタイルの棚卸しに役立つ機能を分かりやすくまとめています。

kzstock.blogspot.com

旧記事は技術資料として残してあります。

,

（旧記事）

Google Chromeデベロッパーツールの実験的機能にCSS Overviewが追加されたことを知りました。

この機能をONにすると、表示しているページで使用されているCSSの概要を把握することができます。

このブログは思いつきで作成したインラインスタイルが多数ありますが、「未使用の宣言」は使われてないスタイルを教えてくれます。

[機能概要]
出典：ProgrammersPark

1. 要素の数
2. スタイルの概要（外部スタイルシート、インラインスタイル要素、スタイルルール）
3. メディアクエリの概要
4. セレクター（タイプ、ID、クラス、属性など）
5. 色の概要（背景色、テキスト色、境界線色、塗りつぶし色）
6. フォントの概要（フォントスタイル、フォントサイズ、フォントの太さ、行の高さ）
7. 未使用の宣言の概要

CSS Overview

Ctrl＋Shift＋I

[Chrome]

1. デベロッパーツール
2. 歯車アイコン
3. Experiments
4. □CSS Overview
5. デベロッパーツールを閉じる
6. デベロッパーツールを開く
7. メニューにCSS Overviewが現れる

スナップショット

歯車アイコン

Experiments > CSS Overview

CSS Overview

メニュー

[CSS Overview]

1. Overview summary｜概要
2. Colors｜色
3. Font info｜フォント情報
4. Unused declarations｜未使用の宣言
5. Media queries｜メディアクエリ

スナップショット

Colorsが何気に便利です。
この機能を早く知りたかった！

まとめ

[CSS Overviewの機能]

1. 要素の数
2. スタイルの概要（外部スタイルシート、インラインスタイル要素、スタイルルール）
3. メディアクエリの概要
4. セレクター（タイプ、ID、クラス、属性など）
5. 色の概要（背景色、テキスト色、境界線色、塗りつぶし色）
6. フォントの概要（フォントスタイル、フォントサイズ、フォントの太さ、行の高さ）
7. 未使用の宣言の概要

 External link

• CSS Overview — New Experimental Feature in Google Chrome | by Shivaji Ranaware | ProgrammersPark | Jul, 2020 | Medium

検証：Google Chrome 83.0.4103.116

：SC2

このサイトを検索 | Search this site