サイト模写に便利!WhatFontの導入から使い方までを解説

プログラミング

 

こんにちは、のくと申します。

 

HTML/CSSを本である程度知ったら、次の段階として

既存のWEBサイトを模写してみる

ことが良いとされています。

 

理由は、

  • 今の自分の実力でどこまでできるのかがわかる
  • 自分が具体的にどこを理解していないのかがわかる
  • 実用的なサイトを隅々まで理解して一からサイトを作る時の参考になる

などあって、とても効果の高い練習法で、かつ一人ですぐ始められるお手軽さが良いです。

 

そして、今回紹介するWhatFontは、サイト模写において強力な武器になります

この記事では、そんなWhatFontの導入から使い方までを順を追って解説していきます。

ぜひサイト模写の練習に活かしてください!

 

目次
  • WhatFontとは
  • WhatFontの導入方法はとても簡単です
  • WhatFontを使ってサイト模写しよう(CSSコーディングに反映させる)

 

WhatFontとは

WhatFontとは、Google Chromeの拡張機能として無料で使うことのできるサービスです。

そして、この拡張機能を使うことでそのWebサイトのその文字はどのフォントで表示されているのかを知ることができます。

 

使い方はまた後ほど解説しますが、とりあえず使ってみるとこのようになります。スクリーンショットを撮る際にカーソルが消えてしまいましたが、カーソルはタイトル「のくのブログ」に合わせていました。

このようにして、そのWebサイトに使われているフォントを知ることでさらに精度の高いサイト模写ができるようになります。

 

WhatFontの導入方法はとても簡単です

ではここから、実際に自分のパソコンにWhatFontを導入する方法を解説します。

手順は以下の3ステップです。

  1. 拡張機能を探せるchromeウェブストアを開く
  2. WhatFontを検索する
  3. 拡張機能を追加する

順に見ていきましょう。

1.拡張機能を探せるchromeウェブストアを開く

ますは、画面の右上にある縦に三つ店が並んだ「設定」っぽいボタンをクリックします。

次に、そこからその他のツール拡張機能と表示させて、これをクリックします。

そうすると、下のような画面に遷移します。ここは拡張機能のトップページで、今自分が導入しているchromeの拡張機能を一覧できるページです。

 

ここで、さらに新しく拡張機能のWhatFontを手に入れるために、chromeウェブストアというページを目指します。まず左上にある横線が三本並んだマークをクリックし、その後でchromeウェブストアを開くをクリックしましょう。

 

そうすると、chromeウェブストアに移動できます。ここまでで、第一段階のchromeウェブストアを開くまでが完了です。

そのまま、第2ステップに行きましょう。

2. WhatFontを検索する

下の画像にあるのが、chromeウェブストアのトップページです。

ここで、目的のWhatFontを探すために画面の左上の検索窓に「whatfont」と入力して検索しましょう。

Enterを押して検索をかけると、次のように、WhatFontと名前のついたいくつかの拡張機能が表示されます。

では、最後の第3ステップに行きましょう。

3. 拡張機能を追加する

検索結果にある中で、今回導入するのは一番上にあるf?のアイコンのWhatFontです。(よくみると、他のと違ってwahtとfontの間に余白がないのも特徴ですね)

 

では、右側のchromeに追加をクリックして導入を始めます。

その時に、画面の上の方にポップアップが表示されますが、基本的に問題ないのでそのまま拡張機能を追加をクリックします。

そうすると、WhatFontの導入は完了します。確認のため、先ほどの拡張機能のトップページに戻ってみると、whatFontが追加されていることを確認できると思います。

また、右上にf?のアイコンが追加されていることも確認しておきましょう。

 

いかがでしたでしょうか。whatfontは非常に優れた拡張機能だと思います。

 

ぜひ、これを使いこなしてさらにサイト模写の腕をあげていきましょう。

 

この記事が皆さんの参考になれば幸いです。

 

終わります。

 

コメント