CSS Overviewの使い方

Atom | RSS

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

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