Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Post on:2020年7月6日
sponsors
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。
表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。
Chromeの新機能「CSS Overview」
Fyi: New in Chrome: CSS Overview
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」を使用
Chromeの新機能「CSS Overview」の使い方
使用方法は上記で終わってしまったので、「CSS Overview」で何が分かるのか見てましょう。
CSSの概要では、要素、外部CSSファイル、インラインのCSS、スタイルのルール、メディアクエリ、タイプセレクタ、idセレクタ、classセレクタ、ユニバーサルセレタク、属性セレクタ、シンプルなセレクタの数が表示されます。
CSSの概要
カラーでは、背景、テキスト、塗りつぶし、ボーダーに使用しているカラーが表示されます。カラーをクリックすると、どの要素に適用されているか詳細が表示されます。
カラーの一覧
使用しているフォントの種類、サイズ、ウェイト、行間などが表示されます。数をクリックすると、そのフォントが適用されている要素が表示されます。
フォントの一覧
未使用宣言では、使用されていない宣言が表示されます。数をクリックすると、詳細な内容が表示されます。
未使用宣言
メディアクエリでは、@mediaで定義しているブレイクポイントやデバイスのクエリなどが表示されます。数をクリックすると、そのメディアクエリが記述されているCSSファイル内の行数が表示されます。
メディアクエリ
sponsors
