「CSS Overview」とは

「CSS Overview」とは、ChromeのDevToolsで使えるようになったツールで、ウェブページ内で使用されているCSSの概要、フォント、カラー、メディアクエリ、未使用の宣言を一覧で確認することができます。

CSS Overviewを使う目的

いくつものウェブページを組んでいると、「このCSSのプロパティは、どこに使っているのだろうか？？」と忘れてしまうことがあります。そんな時に、使われていないプロパティをエディタで開いて探しだすのはとても非効率です。そこで、CSS Overviewを使用して“未使用の宣言”を簡単に探し出す。といった目的でCSS Overviewを使用します。

また、ウェブを訪れるユーザーのエクスペリエンスを向上させることが求められていますが、使われていないCSSの削除などの最適化作業を行いウェブのパフォーマンスを向上させる上でも、”CSSの使われていないプロパティの削除”などは、非常に重要な取り組みのひとつとなっています。

CSS Overviewの設定を有効にする

では、さっそくCSS Overviewの設定を有効にしていきましょう。設定する場所させわかればものの数秒で終わる作業です(*’ω’*)

1.ChromeとDevToolsを立ち上げます

DevToolsが立ち上がったら、画面右上の歯車ボタンをクリックします。

2.Experiments – CSS Overviewをクリック

歯車ボタンをクリックすると、以下の画面が表示されますので、Setting欄の「Experiments」メニューをクリックし、Experiments画面内に表示された「CSS Overview」にチェックします。

3.CSS Overviewが隠れていることもあるので要注意(;^ω^)

「CSS Overview」のメニューがDevTools内に表示されるのですが、下の画面のようにたまに隠れている時がありますので、≫をクリックしてみてください。

4.Capture overviewボタンをクリック

CSS Overviewをクリックすると、なんともシンプルな画面が表示されます。「Capture overview」ボタンをクリックします。

5.無事に”CSS Overview”一覧が表示されました。

無事にCSS Overviewによるキャプチャが成功すると以下の画面のようにCSS Overviewの各項目の一覧が表示されます。

CSS Overviewのセクション

CSS Overviewは、５つのセクションに分かれています。

  • Overview summary
  • Colors
  • Font info
  • Unused declarations
  • Media queries

Unused declarations

ここで最も活用したいセクションは、「Unused declarations（未使用の宣言）」です。Unused declarationsでは、使用されていないプロパティが表示されます。

「Unused declarations」で表示されている数字をクリックすると、以下の画面のように詳細が表示されます。また、Elementで表示された箇所をクリックすると、DevToolsの”Elements”画面に移動して、HTML内のどの部分で概要するCSSが使われているのかを教えてくれます。

「Unused declarations（未使用の宣言）」がひとつも無い場合には、「There are no unused declarations.」と表示されます。

これで使用されていない不必要なCSSプロパティを見つけることができるようになりましたので、時間があるときにでも、削除していきましょう！

お疲れ様でした。

今日も一日頑張りましょう！

Have a great day!