WEBVTT

1
00:00:00.000 --> 00:00:00.948
こんにちは。

2
00:00:00.948 --> 00:00:03.791
シーエスエス、リファレンス解説です。

3
00:00:03.791 --> 00:00:06.791
今回のテーマは、フォントウェイトです。

4
00:00:06.791 --> 00:00:10.108
これは、文字の太さを決めるプロパティです。

5
00:00:10.108 --> 00:00:16.584
数値の七百と指定すると太字らしく見え、四百と指定すると標準的な太さで表示されます。

6
00:00:16.584 --> 00:00:23.533
見出しを目立たせたり、本文との強弱を付けたりする場面で、毎日のように使う基本の指定です。

7
00:00:23.533 --> 00:00:28.351
今回は、七百と四百を比べながら、基本の書き方から、指定しても太さが変わらない理由まで、

8
00:00:28.351 --> 00:00:33.168
初心者向けに分かりやすく解説します。

9
00:00:33.168 --> 00:00:38.222
文字の大きさではなく、線の太さだけが変わる点に注目してください。

10
00:00:38.222 --> 00:00:43.276
太さは、読み手がどこを先に読むべきかを示す手がかりにもなります。

11
00:00:43.276 --> 00:00:45.000
まず基本の書き方です。

12
00:00:45.000 --> 00:00:49.860
書き方はとてもシンプルで、フォントウェイトの後ろにコロンを書き、値として七百をひとつだけ書いて、

13
00:00:49.860 --> 00:00:54.719
最後にセミコロンを付けます。

14
00:00:54.719 --> 00:01:00.676
スライドの例では、デモというクラスを持つ要素に対して、太さを指定しています。

15
00:01:00.676 --> 00:01:08.984
クラス名の前のドットや、波かっこを書き忘れると効かなくなるので、まずはこの三行をそのまま書いてみましょう。

16
00:01:08.984 --> 00:01:15.881
そしてブラウザーで、ハローシーエスエスという文章が太く見えるかどうかを確かめてください。

17
00:01:15.881 --> 00:01:19.016
たった一行で印象が変わるのが分かります。

18
00:01:19.016 --> 00:01:21.515
指定できる値を読み解きましょう。

19
00:01:21.515 --> 00:01:23.702
主な書き方は三通りあります。

20
00:01:23.702 --> 00:01:27.763
ノーマルは標準的な太さで、数値の四百と同じ意味です。

21
00:01:27.763 --> 00:01:31.199
ボールドは太字で、数値の七百と同じ意味です。

22
00:01:31.199 --> 00:01:36.041
そして数値そのものでも指定でき、細かい太さを段階的に選べます。

23
00:01:36.041 --> 00:01:40.726
ふだんの制作では、標準に戻したいときはノーマルか四百、太くしたいときはボールドか七百、

24
00:01:40.726 --> 00:01:45.412
という使い分けを覚えれば十分です。

25
00:01:45.412 --> 00:01:52.909
キーワードと数値は同じ結果になるので、プロジェクトでどちらかにそろえて書くと読みやすくなります。

26
00:01:52.909 --> 00:01:56.814
迷ったら、まず七百と四百を切り替えて比べましょう。

27
00:01:56.814 --> 00:02:02.124
慣れてきたら、見出しと本文で数値を使い分ける練習もしてみてください。

28
00:02:02.124 --> 00:02:04.835
数値の読み方をもう少し詳しく見ます。

29
00:02:04.835 --> 00:02:08.299
数値は小さいほど細く、大きいほど太くなります。

30
00:02:08.299 --> 00:02:11.914
百は細めの表示、九百はとても太い表示の目安です。

31
00:02:11.914 --> 00:02:17.186
ただし注意したいのは、指定した数値がそのまま出るとは限らないことです。

32
00:02:17.186 --> 00:02:22.307
実際に表示できるのは、使っているフォントが用意している太さだけです。

33
00:02:22.307 --> 00:02:27.127
用意がない数値を指定すると、近い太さで代用されることがあります。

34
00:02:27.127 --> 00:02:31.570
最近増えている可変フォント、いわゆるバリアブルフォントでは、対応する範囲の中で、

35
00:02:31.570 --> 00:02:36.014
五百五十のような細かい数値も使えます。

36
00:02:36.014 --> 00:02:39.930
フォント次第で表現の幅が変わると覚えておきましょう。

37
00:02:39.930 --> 00:02:45.352
太さを比べるときは、同じ文章、同じ大きさで並べると違いがはっきりします。

38
00:02:45.352 --> 00:02:47.695
初期値と継承を確認します。

39
00:02:47.695 --> 00:02:53.281
初期値はノーマルで、指定しなければ標準的な太さで表示されます。

40
00:02:53.281 --> 00:02:57.426
そして、このプロパティは親から子へ継承します。

41
00:02:57.426 --> 00:03:04.635
親の要素に七百と書けば、その中にある見出しや文章も太く表示されるようになります。

42
00:03:04.635 --> 00:03:12.203
便利な反面、広い範囲に指定すると、意図しない場所まで太くなってしまうこともあります。

43
00:03:12.203 --> 00:03:19.232
一部分だけ戻したいときは、その要素に改めてノーマルや四百を書き直してください。

44
00:03:19.232 --> 00:03:29.684
また、インヘリットやイニシャルといった共通のキーワードも使えますが、まずは四百と七百の基本をしっかり押さえましょう。

45
00:03:29.684 --> 00:03:31.748
ここからは記事の実例です。

46
00:03:31.748 --> 00:03:39.846
エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。

47
00:03:39.846 --> 00:03:46.356
デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容です。

48
00:03:46.356 --> 00:03:52.866
文章が長めなので、太さが変わると行の折り返し位置まで少し変わる様子も観察できます。

49
00:03:52.866 --> 00:03:57.470
頭の部分では、スタイルシートをリンクで読み込んでください。

50
00:03:57.470 --> 00:04:02.551
この土台は変えずに固定し、次で変える一行の効果だけを観察します。

51
00:04:02.551 --> 00:04:07.632
まずは土台をそのまま用意して、ブラウザーで表示を確認しましょう。

52
00:04:07.632 --> 00:04:09.551
土台のシーエスエスです。

53
00:04:09.551 --> 00:04:15.790
ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。

54
00:04:15.790 --> 00:04:21.548
最後の行でフォントウェイトに七百を指定すると、文字が太字で表示されます。

55
00:04:21.548 --> 00:04:26.666
まずは文章全体が、はっきりと力強く見えることに注目してください。

56
00:04:26.666 --> 00:04:32.585
太くなると文字の幅も少し広がるため、折り返しの位置が変わる場合もあります。

57
00:04:32.585 --> 00:04:38.503
ファイルを保存してブラウザーを再読み込みし、見え方をよく観察してください。

58
00:04:38.503 --> 00:04:43.622
色や余白は変えていないので、違いはこの一行だけが生んだものです。

59
00:04:43.622 --> 00:04:49.060
特に最初の行の英字部分は、太さの変化が分かりやすい観察ポイントです。

60
00:04:49.060 --> 00:04:52.526
次に最後の行だけを、四百へ置き換えます。

61
00:04:52.526 --> 00:04:56.685
すると、太字だった文字が標準的な太さに戻ります。

62
00:04:56.685 --> 00:05:04.482
七百のときと比べると、文章がすっきりと軽く見え、行の折り返し位置も元に戻ることがあります。

63
00:05:04.482 --> 00:05:08.814
ここで大切なのは、色や大きさは同じでも、太さひとつで文章の印象と読みやすさが変わる、

64
00:05:08.814 --> 00:05:13.147
という実感です。

65
00:05:13.147 --> 00:05:19.558
見出しは七百、本文は四百という組み合わせは、強弱を付ける基本パターンです。

66
00:05:19.558 --> 00:05:25.623
逆に、本文全体を太くすると読みにくくなるので、使う範囲は考えましょう。

67
00:05:25.623 --> 00:05:31.688
変更後は保存して再読み込みし、違いを自分の言葉で説明してみてください。

68
00:05:31.688 --> 00:05:33.950
間違えやすい点を確認します。

69
00:05:33.950 --> 00:05:37.343
一つ目は、フォントが持っていない太さです。

70
00:05:37.343 --> 00:05:46.875
読み込んでいない太さを指定すると、近い太さの書体で代用されたり、ブラウザーが機械的に太くする合成表示になったりします。

71
00:05:46.875 --> 00:05:53.338
数値を変えても見た目が変わらないときは、まずフォント側の対応を 의심しましょう。

72
00:05:53.338 --> 00:05:56.731
二つ目は、ストロングタグとの使い分けです。

73
00:05:56.731 --> 00:06:06.587
文章の意味として重要な部分はエイチティーエムエルのストロングで伝え、見た目だけを太くしたいときにこのプロパティを使います。

74
00:06:06.587 --> 00:06:12.241
そのほか、セレクターの不一致や別の宣言による上書きもよくある原因です。

75
00:06:12.241 --> 00:06:14.988
開発者ツールで順に確認しましょう。

76
00:06:14.988 --> 00:06:17.282
ブラウザー互換性を確認します。

77
00:06:17.282 --> 00:06:23.169
記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが二以降、

78
00:06:23.169 --> 00:06:29.056
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。

79
00:06:29.056 --> 00:06:34.407
アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。

80
00:06:34.407 --> 00:06:41.594
とても歴史の長いプロパティなので、今回使った四百と七百の基本の書き方は安心して使えるでしょう。

81
00:06:41.594 --> 00:06:47.711
ただし、プロパティが使えることと、指定した太さがそのまま表示されることは別です。

82
00:06:47.711 --> 00:06:53.215
表示の細部はフォントの用意次第なので、実機でも見え方を確認してください。

83
00:06:53.215 --> 00:06:58.720
数値の細かい段階については、使うフォントと値ごとに個別の確認が必要です。

84
00:06:58.720 --> 00:07:00.816
最後に練習とまとめです。

85
00:07:00.816 --> 00:07:01.864
まとめます。

86
00:07:01.864 --> 00:07:10.072
フォントウェイトは、文字の太さを決めるプロパティで、初期値はノーマル、親から子へ継承しました。

87
00:07:10.072 --> 00:07:17.582
四百が標準、七百が太字で、実際に使える太さはフォントが用意している範囲に限られました。

88
00:07:17.582 --> 00:07:22.821
練習として、まず七百と四百の違いを言葉で説明し、次に文章量や親の幅だけを変えて、

89
00:07:22.821 --> 00:07:28.060
結果がどう変わるかを比べてみてください。

90
00:07:28.060 --> 00:07:29.632
お疲れさまでした。

91
00:07:29.632 --> 00:07:38.714
関連するフォントサイズやフォントスタイルも合わせて学ぶと、文字まわりの整え方がより確かなものになります。

92
00:07:38.714 --> 00:07:45.874
太さを上手に使い分けられるようになると、大切な情報が伝わりやすいページを作れます。

93
00:07:45.874 --> 00:07:51.812
自分のページでも、見出しだけを七百に変えて効果を確かめてみましょう。