タイトル・URLをコピー
記事タイトル【HTMLフォント】font-familyの指定+GoogleFonts導入方法
記事URLhttps://digitor.jp/textbook/html-font-family/
記事タイトル【HTMLフォント】font-familyの指定+GoogleFonts導入方法
記事URLhttps://digitor.jp/textbook/html-font-family/
POINTこの記事をざっくり言うと
font-famliyの基礎知識がわかる様になる。
font-famliyを指定できる様になる。
GoogleFontsを導入し使用できる様になる。
こんにちは!
最近、WEB制作をはじめたけど「font-famliyってなに・・?」「font-famliyを指定できる様になりたい・・!」「GoogleFontsって聞いたことあるけど便利なの・・?」
そのように悩んでいる初心者WEB製作者の方も多いのではないでしょうか?
font-famliyとは文字フォント(種類)を指定できる属性であり、wordなどでも文字のフォント(種類)を変えたことがあるのではないでしょうか?
WEBにおいても文字の種類を変えることができます。
今回は、「font-famillyの基礎知識」「font-familyの指定方法」「font指定に便利なgooglefonts」を中心に解説していきます。
font-family
font-familyとは、文字の種類を指定するCSS属性です。
文字の種類を変え、WEBサイトを見やすくする為にfont-familyを変更します。
font-familyに指定する値
font-familyには主に「フォントファミリー名」「総称フォント名」の2点を指定する事ができます。
それぞれについて解説していきます。
○フォントファミリー名
フォントファミリー名とは、日本語フォント、欧文フォントの様に、具体的な名称の事です。
例として「メイリオ」「ヒラギノ角ゴシック」「Arial」「MS P明朝」「Meiryo」「MSゴシック」「Comic sans MS」などがあげられます。
○総称フォント名
総称フォント名とは、フォントの大きなカテゴリーの名称の事です。
今回は5種類「sans-serif」「serif」「monospace」「cursive」「fantasy」を紹介します。
総称フォント名 |
フォントの種類 |
適用フォント例(フォントファミリー) |
sans-serif |
ゴシック体フォント |
Arial、ヒラギノ角ゴシック、メイリオなど |
serif |
明朝対フォント |
ヒラギノ明朝、MS P明朝、Timesなど |
monospace |
等幅系フォント |
MS明朝、MSゴシック、Osaka-Monoなど |
cursive |
筆記体系フォント |
Comic Sans MSなど |
fantasy |
装飾系フォント |
Chick、albaなど |
font-familyの基本的な記述方法
CSSで「font-family」を指定します、body要素に記載する事で、全体の文字フォントを統一する事ができます。
|
body { font-family: "MS Pゴシック", sans-serif; } |
今回の例ではfont-familyに「MS Pゴッシク」というフォントを指定しました。
フォントファミリー名は、ダブルクォーテーションもしくはシングルクォーテーションで囲む事で使用することができます。
各見出し、段落にも適用することができます。
|
h2 { font-family: "メイリオ", sans-serif; } p { font-family: "メイリオ", sans-serif; } |
body要素全体にフォントの指定をしても、変更したい各見出し、段落に「font-family」を指定する事で、変更したい箇所だけを変更することが可能になります。
総称フォント名は最後に書く
|
h2 { font-family: "メイリオ", sans-serif; } p { font-family: "メイリオ", sans-serif; } |
総称フォント名は、font-familyの一番最後に記述します、またダブルクォーテーションなどでは囲わないルールとなっています。
上記例では、総称フォント名は、「sans-serif」です。
間に半角スペースの入るフォント名クォーテーションで挟む
|
body { font-family: "'Courier New'", "MS P明朝"; } |
間に半角スペースがあるフォントは、半角スペースを空けて、クォーテーションで挟み指定してください。半角スペース一つ違うだけでも表示する事ができません。
複数フォントを指定する
|
body { font-family: "游ゴシック", "ヒラギノ角ゴ ProN", sans-serif, } |
フォントを指定する際は、複数種類フォントを記載します。
理由は、各OS(windows、mac、iPhone/iPad)によって導入されているフォントが異なるため、windowsでは閲覧できても、macでは閲覧できないという現象が起こってしまうためです。
つまり、フォントというのは、「閲覧者の閲覧環境」に依存します。
「游ゴシックはwindows表示用のフォント」、「ヒラギノ角ゴ ProNはmacOS、iOS表示用のフォント」と別れているため、どのOSでも対応できる様に複数指定し、指定方法はカンマで区切り指定します。
前に書かれたフォントが優先される
|
body { font-family: "メイリオ", "ヒラギノ明朝", "Osaka"; } |
font-familyを指定した場合は、前に記述してあるフォントから優先的にフォントが適用されます。閲覧者側に指定したフォントが入ってなければ、記述順に適用できるフォントを探していきます。
今回の例では、「メイリオ」「ヒラギノ明朝」「Osaka」の順番に適用されていきます。
欧文フォントを前に書く
|
body { font-family: "Times New Roman", "Trajan", "ヒラギノ角ゴシック", "MS明朝"; } |
英語部分を欧文フォント、日本語部分を日本語で指定したい場合は、欧文フォントを先に指定しましょう。
日本語フォントを先に指定してしまうと欧文フォントは指定されず、全て日本語フォントが指定されてしまいます。
Google Fonts
Google FontsとはGoogleが無料で提供する、フォントサービスで、Webサーバーから読み込み表示する事ができ、様々な言語に対応しています。
GoogleFonts使用方法
1.GoogleFontsにアクセス
2.利用したいフォントを選ぶ
3.コードをコピペして貼り付ける
上記3点が大まかな流れです。
それでは細かく見ていきましょう。
1.まずはGooglefontsにアクセスします。
https://fonts.google.com/
各項目の説明をします。
search
フォント名から検索したい時に使用します。
フォント名がハッキリわかっている時は便利です。
Sentence
表示さてている文字の種類を変更する事ができます。
文字の種類を変更させる事により、GoogleFontsを利用し、どのような文字を表示したいのかの検討をつけることができます。
Categories
フォントの書体を選ぶ事ができます。
serif: 明朝体の様な書体
Sans Serif:ゴシック体のような書体
Display:装飾文字
Handrwiting:手書き風
monspace:等幅フォント
Language
言語の中からフォントを絞り込む事ができます、日本語を含め29言語の中から選択する事ができます。
Font properties
フォント詳細をさらに絞り込む事ができます。
Number of style: スタイルの数
Thickness:文字の太さ
Slant:斜体の角度
Width:字幅の大きさ
2.利用したいフォントを選ぶ
利用したいフォントが決まったら、文字の太さなど利用したいフォントのスタイルを決め、フォントをクリックします。
3.コードをコピペして貼り付ける
linkから始まるタグをHTMLファイル内<head>〜</head>内に貼り付けます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>button example</title> <link rel="stylesheet" href="sample.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet"> </head> <body > <p class="one">ABCDEFGHIGKLMNOPQRSTUVWXYZ</p> <p class="two">ABCDEFGHIGKLMNOPQRSTUVWXYZ</p> <p class="three">ABCDEFGHIGKLMNOPQRSTUVWXYZ</p> </body> </html> |
CSSのコードはCSSファイルに貼り付けます。
|
p { font-family: 'Noto Sans JP', sans-serif; } |
上記手順で指定した、GoogleFontを使用できるようになります。
○HTMLを変えずにフォントを読み込む方法
「@import」をクリックして→CSS内に貼り付けてください
【オススメ】Googlefont(日本語版)
日本語フォントは8種類提供されています。
○Noto Sans Jp
GoogleとAdobe社が共同開発した日本語フォント、フォントウェイトの種類は、6種類あります。
Noto Sans Jp
○Note Serif JP
明朝体形式で、フォントウェイトの種類は7種類
Note Serif JP
○MPLUS1p
漢字は直線、仮名は丸みのあるのが特徴、フォントウェイトは7種類
MPLUS1p
○MPULUSRoundede1c
MPLUS1pにさらに丸みがかかっている事が特徴、フォントウェイトは7種類
MPULUSRoundede1c
○Kosugi
新たに追加されたゴシック体、フォントウェイトは1種類
Kosugi
○KosugiMaru
丸ゴシック体、フォントウェイトは1種類
KosugiMaru
○sawarabi Gothic
フォントウェイトは1種類、漢字が十分に揃っていないので、メインの使用はオススメできない
sawarabi Gothic
○sawarabi Minocho
上記同様、フォントウェイトは1種類、漢字が十分に揃っていないので、メインの使用はオススメできない
sawarabi Minocho
まとめ
「font-famillyの基礎知識」「font-familyの指定方法」「font指定に便利なGoogleFonts」を中心に解説してきました。
最後にポイントをまとめます。
1.font-familyは主に「フォントファミリー名」「総称フォント名」の2点をCSSで指定する
2.font-familyはwebページ全体、見出し、各段落ごとに細かく指定する事ができる
3.フォントは複数指定する、理由は各OS(windows、mac、iPhone/iPad)によって
導入されているフォントが異なる為
4.font-familyは前に記述されたフォントが優先される
5.GoogleFontsとは、Googleが無料で提供する、フォントサービスで、Webサーバーから読み込み
表示する事ができるサービス
6.GoogleFonts使用方法は
①Googlefontsにアクセス
②利用したいフォントを選ぶ
③コードをコピペして貼り付ける
いかがだったでしょうか?
WEBページ内の大半はテキスト情報です、font-familyを使いこなし、より良いWEB制作をしていきましょう。
WordPressでバックアップをとる方法【タイミング/用途別で解説】
バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。
【最短】WordPress(ワードプレス)で問合せフォームを設置する方法
お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。
【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法
今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトル【HTMLフォント】font-familyの指定+GoogleFonts導入方法
記事URLhttps://digitor.jp/textbook/html-font-family/
記事タイトル【HTMLフォント】font-familyの指定+GoogleFonts導入方法
記事URLhttps://digitor.jp/textbook/html-font-family/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。