2020.08.07

おすすめ

ページのスタイルを一覧で見れるChromeの機能『CCS Overview』

Chromeのデベロッパーツールに実装された「CSS Overview」。
表示しているページの適用されているCSSの各項目を一覧で見れるので、ページの確認をする時などに役立つツールです。
そのCCS Overviewをどのように導入するのか、どんな項目を見れるのかをご紹介します。

New in Chrome: CSS Overview | CSS-Tricks

Here’s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are ...

CSS Overviewを導入してみよう

チェックボックスにチェック入れるか入れないかで、わりと導入するのは簡単で何かをインストールなどの手間もないので、すぐに使用できると思います。

STEP① Chromeのデベロッパーツールを開きます

STEP② Settingページを開きます

STEP③ Settingページ内のExperimentsをクリックをします

STEP④ CSS Overviewのチェックボックスにチェックを入れます

STEP➄ 一度デベロッパーツールを閉じます

デベロッパーツールを一度全て閉じないとCSS Overviewが追加されないのでショートカットキーで閉じます。

STEP⑥ 再度デベロッパーツールを開けば、CSS Overviewのタブが出てくれば完了です。

CSS Overviewのタブは出てきましたでしょうか?
青いボタンで『Capture overview』のボタンをおすと下の画像のような画面になります。

CSS Overviewを使い方

続いては、このCSS Overviewの機能についてどのように役立つのかを当ブログのトップページを使用してご説明します。

Overview Summary:CSSの概要

Overview Summaryではどの項目がどれくらい存在するのかを数値で確認することができます。

  • Elements:HTMLの要素
  • Extermal stylesheets:外部のスタイルシートの読み込み
  • inline style elements:HTML内にstyleを書いている数
  • Style rules:スタイルのルール
  • Media queries:メディアクエリ
  • Type selectors:タイプセレクタ
  • ID selectors:idセレクタ
  • Class selectors:class セレクタ
  • Universal selectors:ユニバーサルセレクタ
  • Attribute selectors:属性セレクタ
  • Non-simplae selectors:シンプルなセレクタ

Colors:カラーの一覧

Colorsでは、ページに指定してある色を一覧として確認する事ができます。

色の部分ををクリックすると、下にElementが出来て、どこで指定されている色なのかを調べる事ができます。

Font info:フォントの一覧

Font infoでは、ページ内で指定している「font-family・font-size・font-weight・line-height」を確認する事ができます。
こちらのColorsと同様で青く伸びてる部分をクリックするとどの部分に適用されているか表示できます。

Unused declarations:未使用宣言

Unused declarationsでは、意味のないCSSを指定していないかをチェックする事ができます。

Media queries:メディアクエリ

Media queriesでは、ブレイクポイントやクエリなどで@mediaで定義しているものが表示されます。こちらも数値の部分をクリックすると、CSSファイルでどこに指定されているかが見る事ができます。

まとめ

ページ全体にどの部分にどんなスタイルが一覧としてみるので、フロントエンドエンジニアの方だけではなくて、デザイナーの確認としても使用できるツールだと思うので、是非使用してほしい機能です。

この記事を書いた人

MASATOSHI

MASATOSHI

フロントエンドエンジニア

馬が大好きなWEBコーダーです。コーディングの技術はまだまだだけど、わかりやすい内容でお届けできたらなと思います。