SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのfont-familyの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:29動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、フォントファミリーです。
  4. 0:06これは、文字をどの書体で表示するかを決めるプロパティです。
  5. 0:10同じ文章でも、書体が変わると読みやすさや雰囲気が大きく変わります。
  6. 0:15大切なのは、このプロパティがひとつの書体だけを指定するのではなく、候補を優先順に並べる仕組みだという点です。
  7. 0:23今回は、システムユーアイとジョージアという二つの例を比べながら、候補の並べ方から、
  8. 0:28効かないときの注意点まで、初心者向けに分かりやすく解説します。
  9. 0:33端末によって表示が変わる理由も一緒に押さえましょう。
  10. 0:37書体は内容の意味を変えませんが、第一印象や読み進めやすさを左右する、デザインの土台でもあります。
  11. 0:44まず基本の書き方です。
  12. 0:45フォントファミリーの後ろにコロンを書き、候補をカンマで区切って並べ、最後にセミコロンを付けます。
  13. 0:52スライドの例では、デモというクラスを持つ要素に、システムユーアイとサンセリフを指定しています。
  14. 0:58左に書いたものほど優先され、使えなければ右の候補へ進みます。
  15. 1:02クラス名の前のドットや、カンマの書き忘れがあると効かなくなるので、まずはこの三行をそのまま書いてみましょう。
  16. 1:09そしてブラウザーで、ハローシーエスエスという文章の書体がどう見えるか確かめてください。
  17. 1:15並び順がそのまま優先順位になる、という感覚をつかむことが第一歩です。
  18. 1:19指定できる値の読み方を確認します。
  19. 1:22値は、使いたいフォントの名前をカンマで区切って優先順に並べたリストです。
  20. 1:27フォント名に空白が含まれるときは、引用符で囲んで一つの名前として伝えます。
  21. 1:32たとえばユウゴシックのように、空白のある名前がその例です。
  22. 1:36そしてリストの最後には、必ずサンセリフやセリフといった汎用ファミリーを置きます。
  23. 1:41これは、具体的なフォントがどれも使えなかったときに、似た系統の書体で表示するための保険です。
  24. 1:48保険を忘れると、意図とかけ離れた書体になることがあるので注意しましょう。
  25. 1:53迷ったときは、具体名を二つから三つ並べ、最後に汎用名を置く形から始めると失敗が少なくなります。
  26. 1:59汎用ファミリーについて、もう少し詳しく見ます。
  27. 2:03これは特定の製品名ではなく、書体の系統を示すキーワードです。
  28. 2:07代表的なのは二つで、サンセリフは文字の端に飾りが少なく、すっきりして画面で読みやすい系統です。
  29. 2:14セリフは端に小さな飾りがあり、印刷物のような落ち着いた印象を与えます。
  30. 2:19そのほか、等幅のモノスペース、手書き風のファンタジー、筆記体風のカーシブがあり、
  31. 2:23合わせて五つの系統が基本です。
  32. 2:27具体名の後ろに系統を置くことで、どの端末でも印象の方向性だけは保てるようになります。
  33. 2:33用途に合わせて系統を選ぶ意識を持ちましょう。
  34. 2:36初期値と継承を確認します。
  35. 2:38初期値は仕様上、ユーザーエージェントに依存するとされ、ブラウザーや端末の既定の書体が使われます。
  36. 2:46決まった一つの名前ではない点が、このプロパティらしい特徴です。
  37. 2:50そして、このプロパティは親から子へ継承します。
  38. 2:54たとえばボディ要素に書けば、その中にある見出しや段落にも同じ候補リストが引き継がれます。
  39. 3:01そのため、ページ全体の書体は広い範囲に一度だけ書き、見出しだけ別の書体にしたい場所で上書きする、
  40. 3:05という使い方が効率的です。
  41. 3:10インヘリットやイニシャルといった共通キーワードも使えます。
  42. 3:14ここからは記事の実例です。
  43. 3:16エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
  44. 3:24デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容です。
  45. 3:30英字と日本語の両方を含むのは、書体の違いが出やすいのが英字だからです。
  46. 3:36頭の部分では、スタイルシートをリンクで読み込んでください。
  47. 3:40この土台は変えずに固定し、次で変える一行の効果だけを観察します。
  48. 3:45まずは土台をそのまま用意しましょう。
  49. 3:47英字と日本語で、変わる部分と変わらない部分を分けて見る準備です。
  50. 3:52土台のシーエスエスです。
  51. 3:54ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
  52. 4:01最後の行でフォントファミリーに、システムユーアイとサンセリフを指定します。
  53. 4:07システムユーアイは、その端末の標準の画面用フォントを使う指定で、読み慣れたすっきりした見た目になります。
  54. 4:16ファイルを保存してブラウザーを再読み込みし、まずは英字の形をよく観察してください。
  55. 4:22色や余白は変えていないので、違いはこの一行だけが生むものです。
  56. 4:28日本語の部分がどう見えるかも、合わせて記録しておきましょう。
  57. 4:33次に最後の行だけを、ジョージアとセリフへ置き換えます。
  58. 4:37すると英字の形が変わり、端に飾りのある、落ち着いた印象の書体で表示されます。
  59. 4:43一方で日本語の部分は、手元の環境にある代替書体によってはほとんど変わらない場合もあります。
  60. 4:49これは失敗ではなく、候補の中に日本語用の書体が含まれていないために起こる、
  61. 4:53自然な結果です。
  62. 4:56ここで大切なのは、英字だけで判定せず、和文と欧文で別々に確認する姿勢です。
  63. 5:02変更後は保存して再読み込みし、違いを自分の言葉で説明してみてください。
  64. 5:07スクリーンショットで二つの表示を並べると、英字の飾りの有無や字の幅の違いがさらにはっきりします。
  65. 5:15間違えやすい点と、効かないときの確認方法です。
  66. 5:18いちばん多い勘違いは、指定した書体が表示されないことを、コードの間違いだと思い込むことです。
  67. 5:26実際には、利用者の端末にその書体がなければ、ブラウザーは自動で次の候補へ進みます。
  68. 5:33さらに、英字は候補の書体で表示されても、日本語は別の代替書体に置き換わることがあり、
  69. 5:37文字ごとに結果が違う場合もあります。
  70. 5:42そのため、特定の文字だけで効いているかどうかを判定しないでください。
  71. 5:48効かないと感じたら、開発者ツールでネットワーク、要素、スタイルズ、コンピューテッドの順に確認し、
  72. 5:54セレクターの一致や上書きがないかを調べましょう。
  73. 5:59ブラウザー互換性を確認します。
  74. 6:01記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
  75. 6:07エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
  76. 6:12アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
  77. 6:17ファイアフォックスやサファリには補足条件の注記がありますが、とても歴史の長いプロパティなので、
  78. 6:22今回使った基本の書き方は安心して使えるでしょう。
  79. 6:27ただし注意したいのは、プロパティが使えることと、名前を挙げた書体がすべての端末にあることは別だという点です。
  80. 6:35表示確認は複数の端末で行う習慣を付けましょう。
  81. 6:38最後に練習とまとめです。
  82. 6:40まとめます。
  83. 6:41フォントファミリーは、書体の候補を優先順に並べるプロパティで、最後に汎用ファミリーを置くのが基本でした。
  84. 6:50初期値はブラウザーに依存し、親から子へ継承しました。
  85. 6:54端末にない書体は次の候補へ進む点も大切でした。
  86. 6:58練習として、まずシステムユーアイ、サンセリフと、ジョージア、セリフの違いを言葉で説明し、
  87. 7:04次に文章量や親の幅だけを変えて結果を比べてみてください。
  88. 7:10お疲れさまでした。
  89. 7:11関連するフォントサイズやフォントウェイト、ラインハイトも合わせて学ぶと、
  90. 7:16文字まわりの整え方がより確かなものになります。
  91. 7:21自分のページでも、本文はそのままに書体だけを切り替えて、印象の変化を確かめてみましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

font-familyの役割と主な指定値を解説。英字の形を比較します。日本語は利用できる代替書体によって変わらない場合もあります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのfont-familyの使い方：指定値・実例・効かない原因とブラウザー互換性 →