SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、フォントウェイトです。
  4. 0:06これは、文字の太さを決めるプロパティです。
  5. 0:10数値の七百と指定すると太字らしく見え、四百と指定すると標準的な太さで表示されます。
  6. 0:16見出しを目立たせたり、本文との強弱を付けたりする場面で、毎日のように使う基本の指定です。
  7. 0:23今回は、七百と四百を比べながら、基本の書き方から、指定しても太さが変わらない理由まで、
  8. 0:28初心者向けに分かりやすく解説します。
  9. 0:33文字の大きさではなく、線の太さだけが変わる点に注目してください。
  10. 0:38太さは、読み手がどこを先に読むべきかを示す手がかりにもなります。
  11. 0:43まず基本の書き方です。
  12. 0:45書き方はとてもシンプルで、フォントウェイトの後ろにコロンを書き、値として七百をひとつだけ書いて、
  13. 0:49最後にセミコロンを付けます。
  14. 0:54スライドの例では、デモというクラスを持つ要素に対して、太さを指定しています。
  15. 1:00クラス名の前のドットや、波かっこを書き忘れると効かなくなるので、まずはこの三行をそのまま書いてみましょう。
  16. 1:08そしてブラウザーで、ハローシーエスエスという文章が太く見えるかどうかを確かめてください。
  17. 1:15たった一行で印象が変わるのが分かります。
  18. 1:19指定できる値を読み解きましょう。
  19. 1:21主な書き方は三通りあります。
  20. 1:23ノーマルは標準的な太さで、数値の四百と同じ意味です。
  21. 1:27ボールドは太字で、数値の七百と同じ意味です。
  22. 1:31そして数値そのものでも指定でき、細かい太さを段階的に選べます。
  23. 1:36ふだんの制作では、標準に戻したいときはノーマルか四百、太くしたいときはボールドか七百、
  24. 1:40という使い分けを覚えれば十分です。
  25. 1:45キーワードと数値は同じ結果になるので、プロジェクトでどちらかにそろえて書くと読みやすくなります。
  26. 1:52迷ったら、まず七百と四百を切り替えて比べましょう。
  27. 1:56慣れてきたら、見出しと本文で数値を使い分ける練習もしてみてください。
  28. 2:02数値の読み方をもう少し詳しく見ます。
  29. 2:04数値は小さいほど細く、大きいほど太くなります。
  30. 2:08百は細めの表示、九百はとても太い表示の目安です。
  31. 2:11ただし注意したいのは、指定した数値がそのまま出るとは限らないことです。
  32. 2:17実際に表示できるのは、使っているフォントが用意している太さだけです。
  33. 2:22用意がない数値を指定すると、近い太さで代用されることがあります。
  34. 2:27最近増えている可変フォント、いわゆるバリアブルフォントでは、対応する範囲の中で、
  35. 2:31五百五十のような細かい数値も使えます。
  36. 2:36フォント次第で表現の幅が変わると覚えておきましょう。
  37. 2:39太さを比べるときは、同じ文章、同じ大きさで並べると違いがはっきりします。
  38. 2:45初期値と継承を確認します。
  39. 2:47初期値はノーマルで、指定しなければ標準的な太さで表示されます。
  40. 2:53そして、このプロパティは親から子へ継承します。
  41. 2:57親の要素に七百と書けば、その中にある見出しや文章も太く表示されるようになります。
  42. 3:04便利な反面、広い範囲に指定すると、意図しない場所まで太くなってしまうこともあります。
  43. 3:12一部分だけ戻したいときは、その要素に改めてノーマルや四百を書き直してください。
  44. 3:19また、インヘリットやイニシャルといった共通のキーワードも使えますが、まずは四百と七百の基本をしっかり押さえましょう。
  45. 3:29ここからは記事の実例です。
  46. 3:31エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
  47. 3:39デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容です。
  48. 3:46文章が長めなので、太さが変わると行の折り返し位置まで少し変わる様子も観察できます。
  49. 3:52頭の部分では、スタイルシートをリンクで読み込んでください。
  50. 3:57この土台は変えずに固定し、次で変える一行の効果だけを観察します。
  51. 4:02まずは土台をそのまま用意して、ブラウザーで表示を確認しましょう。
  52. 4:07土台のシーエスエスです。
  53. 4:09ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
  54. 4:15最後の行でフォントウェイトに七百を指定すると、文字が太字で表示されます。
  55. 4:21まずは文章全体が、はっきりと力強く見えることに注目してください。
  56. 4:26太くなると文字の幅も少し広がるため、折り返しの位置が変わる場合もあります。
  57. 4:32ファイルを保存してブラウザーを再読み込みし、見え方をよく観察してください。
  58. 4:38色や余白は変えていないので、違いはこの一行だけが生んだものです。
  59. 4:43特に最初の行の英字部分は、太さの変化が分かりやすい観察ポイントです。
  60. 4:49次に最後の行だけを、四百へ置き換えます。
  61. 4:52すると、太字だった文字が標準的な太さに戻ります。
  62. 4:56七百のときと比べると、文章がすっきりと軽く見え、行の折り返し位置も元に戻ることがあります。
  63. 5:04ここで大切なのは、色や大きさは同じでも、太さひとつで文章の印象と読みやすさが変わる、
  64. 5:08という実感です。
  65. 5:13見出しは七百、本文は四百という組み合わせは、強弱を付ける基本パターンです。
  66. 5:19逆に、本文全体を太くすると読みにくくなるので、使う範囲は考えましょう。
  67. 5:25変更後は保存して再読み込みし、違いを自分の言葉で説明してみてください。
  68. 5:31間違えやすい点を確認します。
  69. 5:33一つ目は、フォントが持っていない太さです。
  70. 5:37読み込んでいない太さを指定すると、近い太さの書体で代用されたり、ブラウザーが機械的に太くする合成表示になったりします。
  71. 5:46数値を変えても見た目が変わらないときは、まずフォント側の対応を 의심しましょう。
  72. 5:53二つ目は、ストロングタグとの使い分けです。
  73. 5:56文章の意味として重要な部分はエイチティーエムエルのストロングで伝え、見た目だけを太くしたいときにこのプロパティを使います。
  74. 6:06そのほか、セレクターの不一致や別の宣言による上書きもよくある原因です。
  75. 6:12開発者ツールで順に確認しましょう。
  76. 6:14ブラウザー互換性を確認します。
  77. 6:17記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが二以降、
  78. 6:23エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
  79. 6:29アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
  80. 6:34とても歴史の長いプロパティなので、今回使った四百と七百の基本の書き方は安心して使えるでしょう。
  81. 6:41ただし、プロパティが使えることと、指定した太さがそのまま表示されることは別です。
  82. 6:47表示の細部はフォントの用意次第なので、実機でも見え方を確認してください。
  83. 6:53数値の細かい段階については、使うフォントと値ごとに個別の確認が必要です。
  84. 6:58最後に練習とまとめです。
  85. 7:00まとめます。
  86. 7:01フォントウェイトは、文字の太さを決めるプロパティで、初期値はノーマル、親から子へ継承しました。
  87. 7:10四百が標準、七百が太字で、実際に使える太さはフォントが用意している範囲に限られました。
  88. 7:17練習として、まず七百と四百の違いを言葉で説明し、次に文章量や親の幅だけを変えて、
  89. 7:22結果がどう変わるかを比べてみてください。
  90. 7:28お疲れさまでした。
  91. 7:29関連するフォントサイズやフォントスタイルも合わせて学ぶと、文字まわりの整え方がより確かなものになります。
  92. 7:38太さを上手に使い分けられるようになると、大切な情報が伝わりやすいページを作れます。
  93. 7:45自分のページでも、見出しだけを七百に変えて効果を確かめてみましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

font-weightの役割と主な指定値を解説。文字が太字から標準的な太さへ変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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