WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

【検証ツール】ページの概要が見れる「CSSOverView」の使い方

2021年08月12日

投稿者: yokota

Google Chrome のデベロッパーツールである『CSS Overview』の使い方を紹介していきます。

CSS Overviewってなに?

CSS OverviewとはGoogle Chrome のデベロッパーツールのことでで、現在いるページ(表示しているページ)の

・カラー

・フォント

・未使用の宣言

・メディアクリ

を一覧で見ることができる機能です。

マウスポインタで要素をクリック(Select an element in the page to inspect it モード)でもだけでも確認することができますが、CSS Overviewは一覧で見ることができるのでとっても便利です!!

CSS Overviewを有効にする

まずはCSS Overviewを使えるようにするために、設定を有効にしましょう。

Google Chromeの検証ツールを開いてください。

・右クリック → 検証

・windows Ctrl + Shift + i

・Mac Command + Option + i

歯車アイコンをクリックして設定画面をを開く

CSS Overview

メニューの「Experiments」 を選択する

CSS Overview

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

CSS Overview

検証ツールを再起動する

検証ツールを再起動する タブに「CSS Overview」が増えました!

CSS Overview

CSS Overviewの使い方

中央にある青いボタン「Capture Overview」をクリックするだけ!

CSS Overview

「Capture Overview」をクリックすると表示しているページが下の画像のように表示されます。

カラー一覧

フォント一覧

未使用の宣言

メディアクリ

青い箇所を押すと詳細を見ることができます。

最後に

いかがでしたでしょうか。サイトの分析に役立ちそうですね!私はどんな色を使っているか調べたいときによく使っています。簡単に使える便利な機能なので使ったことがない方はぜひ使ってみてください!

この記事の投稿者

2020年2月18日 TORAT

2020年3月13日 TORAT

Flashの上に画像 swfファイルの上に画像

2010年10月15日 TORAT

2021年9月17日 yokota

ブログ一覧へ

書いた人

WRITERS