webサイトのフォントやカラーコードを調べるのに便利なchrome拡張機能があるので紹介します。
webサイトのフォントやカラーコードを調べるのに便利なchrome拡張機能
「What Font」
webサイトのカラーコードを調べるのに便利なchrome拡張機能
「ColrZilla」「ColorPick Eyedropper」
サイトやホームページで使ってるフォントやカラーコード知りたいなって思ったときに使えるchrome拡張機能です。
例えばONCA COFFEEさんのホームページ。
右側のmenu、可愛いフォントを使っています。
webサイトのフォントを調べる「What Font」chrome拡張機能
■「What Font 」
chomeストアからインストールして「Chromeに追加」をします。
・『WhatFont』の使い方
「Exit WhatFont」の表示がるので、
どこでもいいのでマウスをクリックします。
フォントの詳細が表示されます。
- family：指定フォントが表示できない場合の代替フォント
- style：文字のスタイル
- weight：文字の太さ
- size：文字の大きさ
-
line-height：文字の行間
- color：文字の色
（この枠のカラーコード #333333)
つぎはサイト上の色(カラーコード）を調べれる「ColrZilla」「ColorPick Eyedropper」chrome拡張機能の紹介です。
■「ColrZilla 」
① サイト上で使っているカラーコードを調べる「ColrZilla 」です。
・『ColrZilla』の使い方
ColrZilla のアイコンをクリックするとメニューが表示されます。
色々できるので試してみてください。
取得したいところにマウスをのせてダブルクリックをすれば、カラーを取得すると同時にコピーをしてくれます。
カラーコードを調べるんなら簡単で使いやすい「ColrZilla」をオススメします。
② サイト上で使っているカラーコードを調べツール
「ColorPick Eyedropper」
・『ColorPick Eyedropper』の使い方
ColrZillaと同じで取得したいところにマウスをのせるとカラーコードが表示されます。合わせたカーソルをクリックするとカラーコードをコピーできます。
webツールでフォントとかカラーを調べるのもあるのですが、拡張機能を使う方が効率がいいですよ。
