気になるサイトの色やフォントを調べるとき、開発者ツールでCSSを追うより速い方法があります。Chromeの拡張機能です。クリックやマウスオーバーだけで、色・フォント名・サイズが分かります。ここでは定番の6つを、やりたいこと別に画面つきで紹介します。
べんりワザ開発者ツールの使い方入門そもそも開発者ツールって何？という方は、まずこちらからタイプ1：ひとつの情報をピンポイントで調べる
「この色だけ知りたい」「このフォント名だけ知りたい」——目的がはっきりしているときは、専用の拡張がいちばん速いです。
ColorZilla
ページ上の好きな場所をクリックするだけで、その色のカラーコードを取得できるスポイト拡張。
WhatFont
文字にマウスを重ねるだけで、使われているフォント名が分かる拡張。
Page Ruler
ページ上の好きな範囲をドラッグするだけで、幅と高さをピクセル単位で測れる拡張。
タイプ2：まとめて調べる・さわって試す
「このデザイン全体をまるごと知りたい」「数字をいじって確かめたい」ときは、こちらのほうが向いています。
CSS Peeper
色・フォント・余白・角丸……要素をクリックするだけで、そのデザインの数値をまとめて教えてくれる拡張。ColorZillaやWhatFontを1つずつ使うより、まず全体像をつかみたいときに便利です。
VisBug
Google製の拡張。ページの上に直接、要素をドラッグで動かしたり、余白やフォントサイズをその場で変えたりできるさわれる開発者ツールです。
タイプ3：サイトの裏側を知る
Wappalyzer
気になるサイトが何で作られているかを教えてくれる拡張。フレームワークや使っているツールが、アイコン一覧でパッと分かります。
まとめ
- 色はColorZilla、フォントはWhatFont、大きさはPage Rulerでピンポイントに調べる
- デザイン全体をまとめて知るならCSS Peeper、さわって試すならVisBug
- サイトの技術構成が気になったらWappalyzer
- 入れすぎず、気になったものから1つずつ足す
好きなサイトの「いいな」を数字で拾えるようになると、自分のページに取り入れる手が動きます。