WEBVTT

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

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

3
00:00:03.462 --> 00:00:06.347
今回のテーマは、フォントファミリーです。

4
00:00:06.347 --> 00:00:10.530
これは、文字をどの書体で表示するかを決めるプロパティです。

5
00:00:10.530 --> 00:00:15.290
同じ文章でも、書体が変わると読みやすさや雰囲気が大きく変わります。

6
00:00:15.290 --> 00:00:23.080
大切なのは、このプロパティがひとつの書体だけを指定するのではなく、候補を優先順に並べる仕組みだという点です。

7
00:00:23.080 --> 00:00:28.273
今回は、システムユーアイとジョージアという二つの例を比べながら、候補の並べ方から、

8
00:00:28.273 --> 00:00:33.466
効かないときの注意点まで、初心者向けに分かりやすく解説します。

9
00:00:33.466 --> 00:00:37.216
端末によって表示が変わる理由も一緒に押さえましょう。

10
00:00:37.216 --> 00:00:44.140
書体は内容の意味を変えませんが、第一印象や読み進めやすさを左右する、デザインの土台でもあります。

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

12
00:00:45.615 --> 00:00:52.054
フォントファミリーの後ろにコロンを書き、候補をカンマで区切って並べ、最後にセミコロンを付けます。

13
00:00:52.054 --> 00:00:58.357
スライドの例では、デモというクラスを持つ要素に、システムユーアイとサンセリフを指定しています。

14
00:00:58.357 --> 00:01:02.381
左に書いたものほど優先され、使えなければ右の候補へ進みます。

15
00:01:02.381 --> 00:01:09.624
クラス名の前のドットや、カンマの書き忘れがあると効かなくなるので、まずはこの三行をそのまま書いてみましょう。

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

17
00:01:15.392 --> 00:01:19.952
並び順がそのまま優先順位になる、という感覚をつかむことが第一歩です。

18
00:01:19.952 --> 00:01:22.307
指定できる値の読み方を確認します。

19
00:01:22.307 --> 00:01:27.293
値は、使いたいフォントの名前をカンマで区切って優先順に並べたリストです。

20
00:01:27.293 --> 00:01:32.418
フォント名に空白が含まれるときは、引用符で囲んで一つの名前として伝えます。

21
00:01:32.418 --> 00:01:36.435
たとえばユウゴシックのように、空白のある名前がその例です。

22
00:01:36.435 --> 00:01:41.976
そしてリストの最後には、必ずサンセリフやセリフといった汎用ファミリーを置きます。

23
00:01:41.976 --> 00:01:48.347
これは、具体的なフォントがどれも使えなかったときに、似た系統の書体で表示するための保険です。

24
00:01:48.347 --> 00:01:53.334
保険を忘れると、意図とかけ離れた書体になることがあるので注意しましょう。

25
00:01:53.334 --> 00:01:59.844
迷ったときは、具体名を二つから三つ並べ、最後に汎用名を置く形から始めると失敗が少なくなります。

26
00:01:59.844 --> 00:02:03.200
汎用ファミリーについて、もう少し詳しく見ます。

27
00:02:03.200 --> 00:02:07.577
これは特定の製品名ではなく、書体の系統を示すキーワードです。

28
00:02:07.577 --> 00:02:14.435
代表的なのは二つで、サンセリフは文字の端に飾りが少なく、すっきりして画面で読みやすい系統です。

29
00:02:14.435 --> 00:02:19.541
セリフは端に小さな飾りがあり、印刷物のような落ち着いた印象を与えます。

30
00:02:19.541 --> 00:02:23.554
そのほか、等幅のモノスペース、手書き風のファンタジー、筆記体風のカーシブがあり、

31
00:02:23.554 --> 00:02:27.566
合わせて五つの系統が基本です。

32
00:02:27.566 --> 00:02:33.694
具体名の後ろに系統を置くことで、どの端末でも印象の方向性だけは保てるようになります。

33
00:02:33.694 --> 00:02:36.904
用途に合わせて系統を選ぶ意識を持ちましょう。

34
00:02:36.904 --> 00:02:38.889
初期値と継承を確認します。

35
00:02:38.889 --> 00:02:46.218
初期値は仕様上、ユーザーエージェントに依存するとされ、ブラウザーや端末の既定の書体が使われます。

36
00:02:46.218 --> 00:02:50.952
決まった一つの名前ではない点が、このプロパティらしい特徴です。

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

38
00:02:54.463 --> 00:03:01.182
たとえばボディ要素に書けば、その中にある見出しや段落にも同じ候補リストが引き継がれます。

39
00:03:01.182 --> 00:03:05.839
そのため、ページ全体の書体は広い範囲に一度だけ書き、見出しだけ別の書体にしたい場所で上書きする、

40
00:03:05.839 --> 00:03:10.496
という使い方が効率的です。

41
00:03:10.496 --> 00:03:14.924
インヘリットやイニシャルといった共通キーワードも使えます。

42
00:03:14.924 --> 00:03:16.887
ここからは記事の実例です。

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

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

45
00:03:30.779 --> 00:03:36.063
英字と日本語の両方を含むのは、書体の違いが出やすいのが英字だからです。

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

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

48
00:03:45.274 --> 00:03:47.992
まずは土台をそのまま用意しましょう。

49
00:03:47.992 --> 00:03:52.824
英字と日本語で、変わる部分と変わらない部分を分けて見る準備です。

50
00:03:52.824 --> 00:03:54.819
土台のシーエスエスです。

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

52
00:04:01.302 --> 00:04:07.452
最後の行でフォントファミリーに、システムユーアイとサンセリフを指定します。

53
00:04:07.452 --> 00:04:16.096
システムユーアイは、その端末の標準の画面用フォントを使う指定で、読み慣れたすっきりした見た目になります。

54
00:04:16.096 --> 00:04:22.912
ファイルを保存してブラウザーを再読み込みし、まずは英字の形をよく観察してください。

55
00:04:22.912 --> 00:04:28.065
色や余白は変えていないので、違いはこの一行だけが生むものです。

56
00:04:28.065 --> 00:04:33.052
日本語の部分がどう見えるかも、合わせて記録しておきましょう。

57
00:04:33.052 --> 00:04:37.193
次に最後の行だけを、ジョージアとセリフへ置き換えます。

58
00:04:37.193 --> 00:04:43.020
すると英字の形が変わり、端に飾りのある、落ち着いた印象の書体で表示されます。

59
00:04:43.020 --> 00:04:49.921
一方で日本語の部分は、手元の環境にある代替書体によってはほとんど変わらない場合もあります。

60
00:04:49.921 --> 00:04:53.371
これは失敗ではなく、候補の中に日本語用の書体が含まれていないために起こる、

61
00:04:53.371 --> 00:04:56.822
自然な結果です。

62
00:04:56.822 --> 00:05:02.496
ここで大切なのは、英字だけで判定せず、和文と欧文で別々に確認する姿勢です。

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

64
00:05:07.863 --> 00:05:15.224
スクリーンショットで二つの表示を並べると、英字の飾りの有無や字の幅の違いがさらにはっきりします。

65
00:05:15.224 --> 00:05:18.942
間違えやすい点と、効かないときの確認方法です。

66
00:05:18.942 --> 00:05:26.379
いちばん多い勘違いは、指定した書体が表示されないことを、コードの間違いだと思い込むことです。

67
00:05:26.379 --> 00:05:33.007
実際には、利用者の端末にその書体がなければ、ブラウザーは自動で次の候補へ進みます。

68
00:05:33.007 --> 00:05:37.857
さらに、英字は候補の書体で表示されても、日本語は別の代替書体に置き換わることがあり、

69
00:05:37.857 --> 00:05:42.707
文字ごとに結果が違う場合もあります。

70
00:05:42.707 --> 00:05:48.204
そのため、特定の文字だけで効いているかどうかを判定しないでください。

71
00:05:48.204 --> 00:05:54.024
効かないと感じたら、開発者ツールでネットワーク、要素、スタイルズ、コンピューテッドの順に確認し、

72
00:05:54.024 --> 00:05:59.844
セレクターの一致や上書きがないかを調べましょう。

73
00:05:59.844 --> 00:06:01.960
ブラウザー互換性を確認します。

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

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

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

77
00:06:17.757 --> 00:06:22.764
ファイアフォックスやサファリには補足条件の注記がありますが、とても歴史の長いプロパティなので、

78
00:06:22.764 --> 00:06:27.771
今回使った基本の書き方は安心して使えるでしょう。

79
00:06:27.771 --> 00:06:35.388
ただし注意したいのは、プロパティが使えることと、名前を挙げた書体がすべての端末にあることは別だという点です。

80
00:06:35.388 --> 00:06:38.632
表示確認は複数の端末で行う習慣を付けましょう。

81
00:06:38.632 --> 00:06:40.616
最後に練習とまとめです。

82
00:06:40.616 --> 00:06:41.608
まとめます。

83
00:06:41.608 --> 00:06:50.204
フォントファミリーは、書体の候補を優先順に並べるプロパティで、最後に汎用ファミリーを置くのが基本でした。

84
00:06:50.204 --> 00:06:54.503
初期値はブラウザーに依存し、親から子へ継承しました。

85
00:06:54.503 --> 00:06:58.305
端末にない書体は次の候補へ進む点も大切でした。

86
00:06:58.305 --> 00:07:04.257
練習として、まずシステムユーアイ、サンセリフと、ジョージア、セリフの違いを言葉で説明し、

87
00:07:04.257 --> 00:07:10.208
次に文章量や親の幅だけを変えて結果を比べてみてください。

88
00:07:10.208 --> 00:07:11.696
お疲れさまでした。

89
00:07:11.696 --> 00:07:16.573
関連するフォントサイズやフォントウェイト、ラインハイトも合わせて学ぶと、

90
00:07:16.573 --> 00:07:21.450
文字まわりの整え方がより確かなものになります。

91
00:07:21.450 --> 00:07:28.724
自分のページでも、本文はそのままに書体だけを切り替えて、印象の変化を確かめてみましょう。