CSS Overview の使い方

CSS Overview とは

CSS Overview とは、Chrome の DevTools に実装された新しい機能です。CSS Overview を使うと、表示しているページに適用されている CSS の概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧で確認することができます。

CSS Overview の設定を有効にする

CSS Overview の設定を有効にするため、Google Chrome から DevTools を呼び出します。DevTools は、以下のいずれかの方法で呼び出せます。

• Chrome メニューから [その他のツール] → [デベロッパー ツール]
• ページを右クリックして [検証] を選択する
• Ctrl + Shift + I キーを押す（Windows）、または Cmd + Opt + I キーを押す（Mac）
• F12 キーを押す

右上の歯車アイコンをクリックして Settings ページを開きます。

Settings の一覧 (左側の一覧) から、Experiments を選択します。

Experiments の一覧の中にある CSS Overview にチェックを入れて、右上の☓ボタンから Settings ページを閉じます。

DevTools の上部に Reload DevTools ボタンが表示されるので、クリックして DevTools を再起動します。

DevTools のメニューに CSS Overview が表示されます。

CSS Overview の使い方

CSS Overview の使い方は CSS を調べたいページを表示し、Caputure overview ボタンをクリックするだけです。以下は、本サイトのトップページに CSS Overview を使用した例です。

CSS Overview の結果は、以下のセクションに分かれています。

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

Overview summary

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

Colors

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

Font info

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

Unused declarations

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

未使用宣言が存在しない場合は、There are no unused declarations.(未使用の宣言はありません) と表示されます。

Media queries

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