SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、フォントです。
  4. 0:06これは、文字まわりの設定を一括で指定できる、ショートハンドと呼ばれるプロパティです。
  5. 0:12斜体にするか、太さはどれくらいか、文字の大きさ、行間、そして書体の種類までを、
  6. 0:16一行にまとめて書けます。
  7. 0:20今回は、イタリックで太めの例と、標準的な太さの例を比べながら、基本の書き方から注意点まで、
  8. 0:25初心者向けに分かりやすく解説します。
  9. 0:30一番大切なのは、便利な反面、書かなかった設定が初期値に戻ってしまう点です。
  10. 0:36ここを最初に押さえておくと、思わぬ上書きを防げます。
  11. 0:40個別のプロパティを一つずつ書く方法と使い分けられるようになると、文字の見た目を思い通りに整える力がぐっと上がります。
  12. 0:49まず基本の書き方です。
  13. 0:51プロパティ名、フォントの後ろに、値を決まった順番で並べ、最後にセミコロンを付けます。
  14. 0:57スライドの例では、イタリックで斜体にし、太さを六百、大きさを一・二五レム、
  15. 1:03行間を一・八倍にし、書体をシステムユーアイとサンセリフにしています。
  16. 1:08短い一行ですが、中には七つの個別プロパティ分の情報が詰まっています。
  17. 1:14個別に七行書く代わりに一行で済むので、見出しや本文の基本設定を決めるときに便利です。
  18. 1:20まずはこの形をそのまま書き、ブラウザーで文字が大きく太く変わる様子を確かめてみましょう。
  19. 1:27慣れないうちは、値の一つ一つを声に出して読み、どの設定に対応しているかを指で追いながら確認すると、
  20. 1:32間違いに気づきやすくなります。
  21. 1:37値の並び順を分解して見ていきましょう。
  22. 1:40最初に置けるのは、斜体を決めるフォントスタイルと、太さを決めるフォントウェイトなどです。
  23. 1:47次が中心となる文字の大きさで、スラッシュを挟んで行間を続けられます。
  24. 1:53最後が書体の種類、フォントファミリーです。
  25. 1:56書体はカンマで区切って複数書けますが、これは候補の優先順位で、使えるものが上から選ばれます。
  26. 2:04この順番は入れ替えられません。
  27. 2:06特に、大きさと書体の位置は固定なので、後ろから読むのではなく、前から順に組み立てる意識を持つと書きやすくなります。
  28. 2:15必須の部分と、省略できる部分を分けて覚えましょう。
  29. 2:20必ず必要なのは、文字の大きさと書体の二つだけです。
  30. 2:24斜体、太さ、行間などは省略できます。
  31. 2:27ただし、大きさや書体が一つでも欠けると、宣言全体が無効になって、ブラウザーに無視されてしまいます。
  32. 2:35よくある間違いが、行間を書くスラッシュの位置です。
  33. 2:39行間は必ず大きさの直後に置きます。
  34. 2:42大きさより前に書いたり、書体の後ろに書いたりすると効きません。
  35. 2:47最小形は、大きさと書体だけの短い形です。
  36. 2:51まずは最小形から書き始め、必要なものだけを少しずつ足していくと安全です。
  37. 2:57逆に、行間だけを変えたい場面では、フォントではなくラインハイトだけを書いた方が、
  38. 3:02ほかの設定を壊さずに済むので安全です。
  39. 3:07初期値と継承、そして一番の注意点です。
  40. 3:10このプロパティは通常、親から子へ継承します。
  41. 3:14親にまとめて書けば、中の文章にも広がります。
  42. 3:17一方で、初期値は、構成する個別プロパティそれぞれの初期値を指します。
  43. 3:23ここが落とし穴で、フォントを書くと、書かなかった斜体や太さまで初期値に戻ります。
  44. 3:30たとえば、先にフォントウェイトで太くしておいても、後から太さを含まないフォントを書くと、
  45. 3:34その太さは消えてしまいます。
  46. 3:39対策は、フォントを先に書き、細かい調整はその後に書くことです。
  47. 3:44書く順番が結果を左右する、珍しいプロパティだと覚えてください。
  48. 3:50ここからは記事の実例です。
  49. 3:52エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
  50. 4:00デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容で、
  51. 4:04折り返して複数行になる長さにしてあります。
  52. 4:09複数行あると、文字の大きさだけでなく、行間の広さの違いまで見えるため、フォントの比較には最適です。
  53. 4:16頭の部分では、スタイルシートをリンクで読み込んでください。
  54. 4:21親と子の構造も例の一部なので、この土台は変えずに固定し、次で変える一行の効果だけを観察します。
  55. 4:28文章が短すぎると行間の違いが見えにくいので、比較のときは、必ず折り返しが起きる長さの文章を用意することが大切です。
  56. 4:37土台のシーエスエスです。
  57. 4:39ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
  58. 4:45最後の行でフォントを指定すると、デモの文字が斜体で太くなり、大きさも一・二五レムに広がり、
  59. 4:49行間も一・八倍に開きます。
  60. 4:54色や余白は一切変えていないのに、文章の印象が大きく変わるはずです。
  61. 4:59ポイントは、これだけの変化がたった一行で起きている点です。
  62. 5:04ファイルを保存してブラウザーを再読み込みし、文字の傾き、太さ、大きさ、行の間隔の四点が同時に変わる様子をよく観察してください。
  63. 5:13次に最後の行だけを、標準的な形へ置き換えます。
  64. 5:17新しい値は、大きさ一レム、行間一・六倍、書体は同じ、という内容です。
  65. 5:24すると、斜体が消えて文字がまっすぐになり、太さも標準に戻り、全体が少し小さく、
  66. 5:28行間も少し詰まります。
  67. 5:32ここで注目してほしいのは、斜体と太さは、消せと明示したわけではなく、書かなかったために初期値に戻った、
  68. 5:38という点です。
  69. 5:43前のスライドで学んだ初期化の仕組みが、まさにここで起きています。
  70. 5:49変更後は保存して再読み込みし、二つの見え方の違いを自分の言葉で説明してみてください。
  71. 5:56間違えやすい点を確認します。
  72. 5:58代表的な失敗は三つあります。
  73. 6:00一つ目は、大きさや書体を書き忘れて、宣言全体が無効になることです。
  74. 6:06二つ目は、順番の間違いで、行間のスラッシュを大きさの直後以外に置いてしまうことです。
  75. 6:12三つ目は、先ほどの初期化で、先に書いた太さや斜体が、後のフォントに消されてしまうことです。
  76. 6:19指定が効かないと感じたら、開発者ツールで、ネットワーク、エレメンツ、スタイルズ、
  77. 6:26コンピューテッドの順に調べ、打ち消し線の付いた宣言や無効な行がないかを確認しましょう。
  78. 6:32狭い画面幅や文字拡大でも読めるかの確認も大切です。
  79. 6:36特に、フォントの後ろに個別の指定を足す書き方は、実際の制作でもよく使うので、
  80. 6:40順番ごと覚えておくと役立ちます。
  81. 6:45ブラウザー互換性を確認します。
  82. 6:47記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
  83. 6:52エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
  84. 6:58アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
  85. 7:03とても歴史の長いプロパティなので、今回使った基本の書き方は、安心して使えると考えてよいでしょう。
  86. 7:10ただし、プロパティが使えることと、すべての値や新しい書体の指定方法が使えることは別です。
  87. 7:16珍しい値を追加する場合は、その値ごとの対応も確認してください。
  88. 7:21スマートフォンでも同じ記録が古い版から続いているため、画面の大小を問わず、
  89. 7:25同じ書き方で文字の見た目をそろえられます。
  90. 7:29最後に練習とまとめです。
  91. 7:31まとめます。
  92. 7:32フォントは、文字まわりの設定を一行にまとめる一括指定で、親から子へ継承しました。
  93. 7:39大きさと書体が必須で、書かなかった設定は初期値に戻る点が最大の特徴でした。
  94. 7:45練習として、まず二つの値の違いを言葉で説明し、次に太さだけ、行間だけと、
  95. 7:49一か所ずつ変えて結果を比べてみてください。
  96. 7:54お疲れさまでした。
  97. 7:55関連するフォントサイズやフォントファミリー、ラインハイトを個別に学ぶと、
  98. 8:01一括指定の中身が一つずつ理解できて、使い分けが確かなものになります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

fontの役割と主な指定値を解説。サイズ、太さ、行間をまとめて変えられます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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