スタイル調べ｜フォントと配色を調べるツール by サムネセーフ｜YouTubeサムネイル保存・セーフゾーン確認

「このサイトの見出し、何のフォントだろう」「この青、何番だろう」——デザインやサムネイルを作っていると、他のサイトを参考にしたい場面が何度も来ます。そのたびに開発者ツールを開いて、要素を探して、スタイルの一覧から目当ての行を探すのは面倒です。

この拡張機能は、その手間をカーソルを合わせるだけに変えます。

■ 要素のフォントと色を調べる

ボタンを押すと調査モードになります。ページ上でカーソルを動かすと、その要素の情報が右下に表示されます。

・フォント名（実際に適用されている先頭のフォント）
・文字サイズと太さ
・行間
・文字色（16進数）
・背景色（16進数）

クリックすると、その要素のCSSがクリップボードにコピーされます。そのまま自分のスタイルシートに貼れます。Escキーで終了します。

■ ページ全体の配色を抽出する

そのページで使われている色を数え、多い順に上位8色を表示します。それぞれ何％の要素で使われているかも出るので、「主役の色」と「差し色」の見分けがつきます。色をクリックすれば16進数がコピーされます。

配色を一から考えるより、良いと思ったサイトの比率を測るほうが早く上達します。

■ 権限について

閲覧履歴は読みません。ページの内容を外部に送ることもありません。ボタンを押したそのタブでだけ、その瞬間に動きます。データの収集・送信は一切行いません。