Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる

Post on:2020年7月6日

Chromeの新機能「CSS Overview」の準備

まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。

歯車アイコン（Settings）をクリック

Settingsを開いたら「Experiments」をクリックし、「CSS Overview」のチェックボックスをオンにします。
※2020年7月現在、「CSS Overview」は実験的な機能として利用できます。

「CSS Overview」を有効化

デベロッパーツールに戻ると、「CSS Overview」のタブが利用できるようになります。あとは、CSSを調べたいページを表示し、「Caputure overview」をクリックするだけです。

「Caputure overview」をクリック

当ブログに、「CSS Overview」を使用してみました。

当ブログに「CSS Overview」を使用

使用方法は上記で終わってしまったので、「CSS Overview」で何が分かるのか見てましょう。

CSSの概要では、要素、外部CSSファイル、インラインのCSS、スタイルのルール、メディアクエリ、タイプセレクタ、idセレクタ、classセレクタ、ユニバーサルセレタク、属性セレクタ、シンプルなセレクタの数が表示されます。

CSSの概要

カラーでは、背景、テキスト、塗りつぶし、ボーダーに使用しているカラーが表示されます。カラーをクリックすると、どの要素に適用されているか詳細が表示されます。

カラーの一覧

使用しているフォントの種類、サイズ、ウェイト、行間などが表示されます。数をクリックすると、そのフォントが適用されている要素が表示されます。

フォントの一覧

未使用宣言では、使用されていない宣言が表示されます。数をクリックすると、詳細な内容が表示されます。

未使用宣言

メディアクエリでは、@mediaで定義しているブレイクポイントやデバイスのクエリなどが表示されます。数をクリックすると、そのメディアクエリが記述されているCSSファイル内の行数が表示されます。

メディアクエリ