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

Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。

表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。

Chromeの新機能「CSS Overview」

Chromeの新機能「CSS Overview」
Fyi: New in Chrome: CSS Overview

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

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

Chrome デベロッパーツール

歯車アイコン(Settings)をクリック

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

Chrome デベロッパーツールのSettings

「CSS Overview」を有効化

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

CSS Overview」

「Caputure overview」をクリック

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

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

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

Chromeの新機能「CSS Overview」の使い方

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

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

CSS Overviewのキャプチャ

CSSの概要

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

CSS Overviewのキャプチャ

カラーの一覧

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

CSS Overviewのキャプチャ

フォントの一覧

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

CSS Overviewのキャプチャ

未使用宣言

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

CSS Overviewのキャプチャ

メディアクエリ

sponsors

top of page

©2020 coliss