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 キーを押す
Chrome DevTools
Chrome DevTools

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

Settings ページ
Settings ページ

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

Experiments ページ
Experiments ページ

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

CSS Overview にチェックを入れる
CSS Overview にチェックを入れる

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

DevTools の再起動
DevTools の再起動

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

CSS Overview の表示
CSS Overview の表示

CSS Overview の使い方

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

CSS Overview の表示例
CSS Overview の表示例

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

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

Overview summary

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

Overview summary
Overview summary

Colors

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

Colors
Colors

Font info

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

Font info
Font info

Unused declarations

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

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

Unused declarations
Unused declarations

Media queries

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

Media queries
Media queries

関連記事