セカヤサブログ世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。2024.07.08みなさん、Webサイトを見ていて「このフォントなんて名前なんだろう?」と気になったことってありますよね。Web制作をしているコーダーやデザイナーの方であれば「ちゃんとCSSで指定した通りにフォントが表示されているかな?」と不安になったこと、ありますよね。今回はそのどちらも完璧に解決する方法をご紹介します。拡張機能を入れる必要もなく、信頼度100%の方法ですのでぜひお試しください。ブラウザごとに微妙に方法が異なるので、それぞれ詳しく見ていきましょう。説明が長くなったのでブラウザごとの説明をそれぞれアコーディオンで閉じています。各種ブラウザには、WebサイトやWebサービスを開発するエンジニア向けに利用される「開発者ツール」というものがあります。デベロッパーツールとも呼ばれます。Web制作に携わっている人ならお馴染みですね。これを使うことで実際に表示されているフォントの名前などがわかります。開発者ツールを開くフォントを調べたい文字列を選択する「計算済み」もしくは「フォント」タブから適用されているフォント名を確認するという手順です。細かい解説の前に、まずは設定中の様子をご覧ください。管理」→「要素の検証」と選択してください。+「C」(Mac)、「Ctrl」+「Shift」+「I」(Windows)のショートカットキーで開発者ツールを開き、「コンソール」タブを開いても構いません。次のような画面が開いたらOKです。文字の部分を選択するフォントを調べたい文字の部分を選択します。シリーズ累計500部突破!/今すぐ購入して、Web制作で自由を手にいれる!「計算済み」タブを開き、最下部までスクロールするとある「レンダリングフォント」を確認するここまでできたら、デベロッパーツール下部の計算済みタブから実際に適用されているフォント名を確認しましょう。ここまでできたら、デベロッパーツール下部の計算済みタブから実際に適用されているフォント名を確認しましょう。細かい解説の前に、まずは設定中の様子をご覧ください。検査」と進んでください。+「C」(Mac)、「Ctrl」+「Shift」+「I」(Windows)のショートカットキーで開いても構いません。文字の部分を選択するフォントを調べたい文字の部分を選択します。シリーズ累計500部突破!/今すぐ購入して、Web制作で自由を手にいれる!「計算済み」タブを開き、最下部までスクロールするとある「表示されるフォント」を確認するここまでできたら、デベロッパーツール下部の計算済みタブから実際に適用されているフォント名を確認しましょう。細かい解説の前に、まずは設定中の様子をご覧ください。開発者ツールを開く「ツール」→「ブラウザーツール」→「ウェブ開発ツール」と選択してください。+「C」(Mac)、「Ctrl」+「Shift」+「I」(Windows)のショートカットキーで開発者ツールを開き、「コンソール」タブを開いても構いません。次のような画面が開いたらOKです。文字の部分を選択するフォントを調べたい文字の部分を選択します。シリーズ累計500部突破!/今すぐ購入して、Web制作で自由を手にいれる!「フォント」タブを開き、フォント名を確認するここまでできたら、デベロッパーツール下部のフォントタブから実際に適用されているフォント名を確認しましょう。細かい解説の前に、まずは設定中の様子をご覧ください。開発者ツールを開くメニューから「開発」→「Webインスペクタを表示」と選択してください。+「I」(Mac)のショートカットキーで開発者ツールを開いても構いません。次のような画面が開いたらOKです。文字の部分を選択するフォントを調べたい文字の部分を選択します。対象の部分をクリックするSafariの場合は文字を含むHTML要素部分を選択してください。シリーズ累計500部突破!/今すぐ購入して、Web制作で自由を手にいれる!「フォント」タブを開き、フォント名を確認するここまでできたら、デベロッパーツールのフォントタブの「固有名」から実際に適用されているフォント名を確認しましょう。関連記事Web制作を学ぶ【2023年へ向けて】Web制作・開発に関わる人が受けると良い資格・検定まとめ【国家検定もあるよ】こんにちは。今回はWeb制作やWeb開発に携わる人が勉強すると良さそうな資格・検定をまとめてみます。探してみると、僕も勉強したいと思ったものがたくさんありましたので紹介していきます。Webサイト、アプリケーション...2022.12.28Web制作を学ぶWeb制作を学ぶ月5万円を目指すプログラミング・Web制作学習者に求められるスキル先日HTML/CSS/jQueryを学べば1ヶ月で月5万稼げるようになる!とかいうアホなツイートを見かけまして、つい僕も心の声が漏れてしまいました。いうわけで、今回は月5万円を「安定して」稼ぐ上で「本当に」必要な能力は何なのかを考えてみ...2022.10.08Web制作を学ぶWeb制作を学ぶ2022年、Web制作に役立つ記事まとめこんにちは。そこで僕が今年書いた記事の中で、特に多く読まれた記事をまとめたいと思います。今年の振り返りも兼ねて、ぜひ見ていってください。今年の初めに書いた記事ですね。いろんなスク...2022.12.29Web制作を学ぶWeb制作を学ぶ視覚障害者にとってのWebはこんなに使いづらいこんにちは。最近Twitterでよくアクセシビリティについて論争が行われるのを見かけることが多くなったように思います。いつもWAI-ARIAのroleがどうとかあれが正しくてこれが正しくないとかコード上の話はされども当事者にとって...2022.11.06Web制作を学ぶWeb制作を学ぶプログラミング初心者から独学で学習したい人向けガイドライン【Web系】はい、今回は初心者、未経験かつプログラミングを独学で学びたい方向けのガイドラインです。学習法」で検索すると色々な情報が出てきますが、その中でも時間や経済的な事情で独学が良いという方も多いでしょう。いうことで、どのような...2019.12.20Web制作を学ぶWeb制作を学ぶ単なるHTML/CSSだけのプロジェクトでもホットリロードする方法こんにちは。Web制作領域だと、LPのようにわざわざwebpackやviteなどのビルド/バンドルツールを使うほどでもないプロジェクトだけどホットリロードは欲しい!って時ありますよね。そんな時に簡単にホットリロードを行う方法です。...2022.12.12Web制作を学ぶスポンサーリンク【メディア掲載】レバレジーズ株式会社様のメディア、freelancehubにてポートフォリオの作り方記事が掲載されました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。秀樹フリーランス8年目|「世界一初心者に優しい」→セカヤサ。初心者が5年後も10年後も仕事を奪われない人になるための発信中。最新情報まとめWeb制作役立ちツールホーム検索トップサイドバータイトルとURLをコピーしました。