【ウェブ制作初心者】Chromのデベロッパーツールの機能の一つ「CSS Overview」でサイトに使われている色とか分かる【今は名称が違うみたい？】

動画でChomeのデベロッパーツールのベータ機能「CSS Overview」が紹介されているのを見ました。
ブラウザに表示されているサイトで使われている色やセレクタ、フォント情報までわかるのだとか。

この機能が使えたら、自分のサイトを調べるのにも使えるし、サイトを作る時、他サイトがどうなっているのか調べるのにも使えるということじゃないですか。

これは便利！

ぜひこの機能を使いたいと思い、動画を見ながら使えるように設定しようとしたのですが、あれ、できない。
情報が古いのかな？　と思い、検索してブログとかを見ても、できない。
もしかして、β版で何か理由があって、実装されずに消えてしまったのかもしれない…。

そのような経緯で、私は「CSS Overview」を使うのをいったん諦めました。

ところが、いつも通りデベロッパーツールを使っていたらたまたまその機能を見つけたんですね。
名前が変わっていたんですね～。
「CSS Overview」ではなくて「CSSの概要」という名称になっていました。

設定の方法は簡単です。
①Chromeのデベロッパーツールを開きます。
②右の方にあり縦の…をクリックします。
③「その他ツール」をクリックします。
④「CSSの概要」をクリックします。

これで「CSSの概要」の設定は完了です。
次は使い方です。
①概要を調べたいウェブサイトを開きます。
②デベロッパーツールを開きます。
③メニューに「CSSの概要」が追加されているのでクリックします。
④「概要をキャプチャ」をクリックします。
⑤サイトに使われている色とか分かるようになります。

以上の操作で、下の図のようにそのサイトで使われている色や、セレクタの種類や数、フォントの種類等色々分かるようになります。
サイトを作る上で参考になるかもしれませんね！