フォントの種類や文字サイズの調べ方

本記事の内容:
フォントの種類やサイズの調べ方を説明します。
参考にしたいブログを見つけたとき、その文字フォントや大きさなんかもマネしたくなりませんか?
どうやって調べるの?
最近のブラウザは非常に賢いので、そういった情報も教えてくれるんです。
もちろん、プラグインなどは一切不要。
今の環境のまま、3秒もあれば調べることができます。

ディベロッパーツールを開く

必要なのはブラウザだけ。

まずは、参考にしたいサイトを表示しましょう。

下の例は、赤枠内の文字フォントについて調べる場合です。

まず、そのページを開いたまま、ブラウザのディベロッパーツールを利用します。

ディベロッパーツールといっても難しいことはありません。[F12]キーを押すか、[Ctrl] + [Shift] + [I]でもOKです。

すると下のような画面になります。右側に出てきた画面がディベロッパーツールです。

なんか難しそうな内容が表示されていますが、無視して下さい。ここは使いません。

調べたい箇所を指定

ディベロッパーツールが表示されたら、デベロッパーツールの上側にあるマウスカーソルボタン(赤枠)をクリックしましょう。
その後、調べたい箇所にマウスカーソルを移動させてください。
すると、下の図のようにポップアップが表示されます。
この赤枠内に表示されている情報が知りたいフォントの情報です。
上の例だと、フォントの大きさは18pxになります。
そして、フォントの種類は『游ゴシック体』になりますが、これには少しだけ予備知識が必要です。
上の例だと、游ゴシック体の後ろに”YuGothic”なども表示されていて、どれが該当箇所のフォントなのか迷ってしまいますよね。
こういう時はとりあえず、一番先頭に表示されているのが、該当するフォントの種類と考えてください。
上の例で言うと、調べたい文字のフォントの種類は、先頭に表示されている『游ゴシック体』になります。
ちなみに文字の色は#333333のようです。
操作にかかる時間は2~3秒くらいなので超簡単。
ブログをデザインするときには参考までにどうぞ。
また、色の簡単な調べ方はこちらの記事をご覧になってください。
関連記事

ブログを運営していると、こんな場面に良く出くわします。 私 このサイトの配色をマネしたい!このロゴの色を調べたい! そんな時に便利なツールが、Chrome拡張機能である『ColorPick Eyedropper』です。[…]

それではみなさん、よきブログライフを!
最新情報をチェックしよう!