拡張機能「WhatFont」のすすめ

2020年05月28日

その他

最近なかなかブログを更新できていませんでしたが今日からまた改めて記事を書いていきます!今回は、Webのデザインに役に立つツールを紹介したいと思います。

Webデザインのことを勉強している人ならいろんなサイトを見ることが多いですよね。そこでかっこいいなとかこれ好きだなと感じるサイトに出会うことも少なくないと思います。自分のデザインの参考のためにも細かくみていくとやっぱり使われているフォントが気になりますよね。そんな時にさくっとフォントの種類を調べられるChromeの拡張機能「WhatFont」について紹介していこうと思います。

WhatFontのインストール

WhatFontはchromeの拡張機能の1つでWebサイトに使われているフォントの種類を調べることができます。なのでまずはchromeウェブストアからインストールします。下記のURLからインストールできます。

Chrome ウェブストア「WhatFont」

インストールすると下の画像のようにchromeの右上にWhatFontのアイコンが追加されていたらOKです。

WhatFontの使い方

WhatFontの使い方についてまとめていきます。

気になるフォントがあるWebサイトにアクセスしたら右上のWhatFontのアイコンをクリックします。すると「Exit WhatFont」の文字が出てきます。

あとは調べたいフォントをマウスオーバーするだけです。するとフォント名が表示されます。私のブログの場合NotoSansが使われていますね。

さらにマウスオーバーするとフォントの詳細が下のように表示されます。

ソースコードを見ずにここまで詳しく表示してくれるのは便利ですね!

調べ終わってWhatFontを終了したいときは右上のアイコンか表示されている「Exit WhatFont」をクリックしてください。

まとめ

今回は、Chromeの拡張機能「WhatFont」の紹介、使い方についてまとめていきました。デザインを勉強しているよという人はフォントについては関心が深いかと思いますのでなかなかこの機能は便利かなと思います。ぜひ、インストールして使ってみてください!

Pocket

related

名刺交換のマナーについて

今、学校の進級展に向けて作品づくりであったり作品のパネルづくりなどいろいろな準備しています。進級展には、企業の方もいらっしゃるのでそこで名刺の交換などさせていただく機会もあるかと思います。その時のため

その他

2020.01.18

簡単にローカル環境を構築できる「Local by Flywheel」

WordPressのテーマを自作する際にローカル環境を作っていくと思います。その環境をものすごく簡単に構築できる「Local by Flywheel」というソフトを紹介していきます。 Local by

その他

2020.09.01

2019年の振り返りと2020年の向けて

2019年ももうすぐ終わりを迎え、2020年になろうとしています。 この2019年はたくさんのことがありました。今回、2019年を振り返り、2020年に向けての抱負を記事にまとめていこうと思います。

その他

2019.12.30

Copyrightの正しい書き方

WebサイトのコーディングやデザインしているときにCopylightを書いているのですが、どうやって書けばいいか毎回調べている気がしたので今回は自分の備忘録としてもCopylightの正しい書き方をま

その他

2020.03.09

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き