プログラミング

CSSでフォントが適用されない?おすすめ確認方法を3分で解説【当てたつもりを防ぐ】

CSSでフォントが適用されない?おすすめ確認方法を3分で解説

CSSでフォントを指定したつもりでも、正しいフォントがあたっていないことが結構あります。

私は駆け出しの方のコーディング課題を頻繁に確認しますが、フォント周りの修正箇所が非常に多いです。

それは正しい確認方法があまり知られていないからかなと思っています。

そこで今回はChromeの検証ツール及び拡張機能を使ったフォントの確認方法を見ていきます。

しょーご
しょーご
ちなみに、推奨するのは検証ツールを使用した方法です

拡張機能で確認する方法

WhatFont

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

フォントの情報を一覧で見ることが可能。

Fonts Ninja

https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh?hl=ja

情報がスマートで見やすい。

拡張機能の欠点

そこまで正しくない

実は拡張機能のフォント判定は結構曖昧で、実際に使用されているフォントからずれている場合がありました。

なので、検証ツールで実際に使用されているフォントを確認したほうが確実だと最近気づきました。

検証ツールで確認する方法【推奨】

検証のComputed(計算済み)の一番下に「レンダリングフォント」というのがあるので、そこから確認できます。

確認したい要素を選択して、

Computed(計算済み)の一番下を確認する。

computed(計算済み)はこの位置
フォント確認方法
一番下までスクロールして確認する

ここを信用したほうがいいですね。

詳しい検証ツールの使い方は以下の記事に

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

さらに、まとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

あなたに是非読んでほしい記事です!