WEBVTT

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

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

3
00:00:03.752 --> 00:00:06.096
今回のテーマは、フォントです。

4
00:00:06.096 --> 00:00:12.662
これは、文字まわりの設定を一括で指定できる、ショートハンドと呼ばれるプロパティです。

5
00:00:12.662 --> 00:00:16.648
斜体にするか、太さはどれくらいか、文字の大きさ、行間、そして書体の種類までを、

6
00:00:16.648 --> 00:00:20.634
一行にまとめて書けます。

7
00:00:20.634 --> 00:00:25.558
今回は、イタリックで太めの例と、標準的な太さの例を比べながら、基本の書き方から注意点まで、

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

9
00:00:30.482 --> 00:00:36.265
一番大切なのは、便利な反面、書かなかった設定が初期値に戻ってしまう点です。

10
00:00:36.265 --> 00:00:40.330
ここを最初に押さえておくと、思わぬ上書きを防げます。

11
00:00:40.330 --> 00:00:49.396
個別のプロパティを一つずつ書く方法と使い分けられるようになると、文字の見た目を思い通りに整える力がぐっと上がります。

12
00:00:49.396 --> 00:00:51.112
まず基本の書き方です。

13
00:00:51.112 --> 00:00:57.665
プロパティ名、フォントの後ろに、値を決まった順番で並べ、最後にセミコロンを付けます。

14
00:00:57.665 --> 00:01:03.203
スライドの例では、イタリックで斜体にし、太さを六百、大きさを一・二五レム、

15
00:01:03.203 --> 00:01:08.742
行間を一・八倍にし、書体をシステムユーアイとサンセリフにしています。

16
00:01:08.742 --> 00:01:14.046
短い一行ですが、中には七つの個別プロパティ分の情報が詰まっています。

17
00:01:14.046 --> 00:01:20.599
個別に七行書く代わりに一行で済むので、見出しや本文の基本設定を決めるときに便利です。

18
00:01:20.599 --> 00:01:27.463
まずはこの形をそのまま書き、ブラウザーで文字が大きく太く変わる様子を確かめてみましょう。

19
00:01:27.463 --> 00:01:32.456
慣れないうちは、値の一つ一つを声に出して読み、どの設定に対応しているかを指で追いながら確認すると、

20
00:01:32.456 --> 00:01:37.448
間違いに気づきやすくなります。

21
00:01:37.448 --> 00:01:40.548
値の並び順を分解して見ていきましょう。

22
00:01:40.548 --> 00:01:47.726
最初に置けるのは、斜体を決めるフォントスタイルと、太さを決めるフォントウェイトなどです。

23
00:01:47.726 --> 00:01:53.272
次が中心となる文字の大きさで、スラッシュを挟んで行間を続けられます。

24
00:01:53.272 --> 00:01:56.698
最後が書体の種類、フォントファミリーです。

25
00:01:56.698 --> 00:02:04.202
書体はカンマで区切って複数書けますが、これは候補の優先順位で、使えるものが上から選ばれます。

26
00:02:04.202 --> 00:02:06.649
この順番は入れ替えられません。

27
00:02:06.649 --> 00:02:15.948
特に、大きさと書体の位置は固定なので、後ろから読むのではなく、前から順に組み立てる意識を持つと書きやすくなります。

28
00:02:15.948 --> 00:02:20.160
必須の部分と、省略できる部分を分けて覚えましょう。

29
00:02:20.160 --> 00:02:24.372
必ず必要なのは、文字の大きさと書体の二つだけです。

30
00:02:24.372 --> 00:02:27.405
斜体、太さ、行間などは省略できます。

31
00:02:27.405 --> 00:02:35.661
ただし、大きさや書体が一つでも欠けると、宣言全体が無効になって、ブラウザーに無視されてしまいます。

32
00:02:35.661 --> 00:02:39.873
よくある間違いが、行間を書くスラッシュの位置です。

33
00:02:39.873 --> 00:02:42.737
行間は必ず大きさの直後に置きます。

34
00:02:42.737 --> 00:02:47.960
大きさより前に書いたり、書体の後ろに書いたりすると効きません。

35
00:02:47.960 --> 00:02:51.330
最小形は、大きさと書体だけの短い形です。

36
00:02:51.330 --> 00:02:57.395
まずは最小形から書き始め、必要なものだけを少しずつ足していくと安全です。

37
00:02:57.395 --> 00:03:02.366
逆に、行間だけを変えたい場面では、フォントではなくラインハイトだけを書いた方が、

38
00:03:02.366 --> 00:03:07.336
ほかの設定を壊さずに済むので安全です。

39
00:03:07.336 --> 00:03:10.502
初期値と継承、そして一番の注意点です。

40
00:03:10.502 --> 00:03:14.167
このプロパティは通常、親から子へ継承します。

41
00:03:14.167 --> 00:03:17.833
親にまとめて書けば、中の文章にも広がります。

42
00:03:17.833 --> 00:03:23.498
一方で、初期値は、構成する個別プロパティそれぞれの初期値を指します。

43
00:03:23.498 --> 00:03:30.162
ここが落とし穴で、フォントを書くと、書かなかった斜体や太さまで初期値に戻ります。

44
00:03:30.162 --> 00:03:34.994
たとえば、先にフォントウェイトで太くしておいても、後から太さを含まないフォントを書くと、

45
00:03:34.994 --> 00:03:39.826
その太さは消えてしまいます。

46
00:03:39.826 --> 00:03:44.991
対策は、フォントを先に書き、細かい調整はその後に書くことです。

47
00:03:44.991 --> 00:03:50.156
書く順番が結果を左右する、珍しいプロパティだと覚えてください。

48
00:03:50.156 --> 00:03:52.160
ここからは記事の実例です。

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

50
00:04:00.023 --> 00:04:04.726
デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容で、

51
00:04:04.726 --> 00:04:09.428
折り返して複数行になる長さにしてあります。

52
00:04:09.428 --> 00:04:16.983
複数行あると、文字の大きさだけでなく、行間の広さの違いまで見えるため、フォントの比較には最適です。

53
00:04:16.983 --> 00:04:21.454
頭の部分では、スタイルシートをリンクで読み込んでください。

54
00:04:21.454 --> 00:04:28.700
親と子の構造も例の一部なので、この土台は変えずに固定し、次で変える一行の効果だけを観察します。

55
00:04:28.700 --> 00:04:37.488
文章が短すぎると行間の違いが見えにくいので、比較のときは、必ず折り返しが起きる長さの文章を用意することが大切です。

56
00:04:37.488 --> 00:04:39.354
土台のシーエスエスです。

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

58
00:04:45.419 --> 00:04:49.928
最後の行でフォントを指定すると、デモの文字が斜体で太くなり、大きさも一・二五レムに広がり、

59
00:04:49.928 --> 00:04:54.438
行間も一・八倍に開きます。

60
00:04:54.438 --> 00:04:59.570
色や余白は一切変えていないのに、文章の印象が大きく変わるはずです。

61
00:04:59.570 --> 00:05:04.079
ポイントは、これだけの変化がたった一行で起きている点です。

62
00:05:04.079 --> 00:05:13.876
ファイルを保存してブラウザーを再読み込みし、文字の傾き、太さ、大きさ、行の間隔の四点が同時に変わる様子をよく観察してください。

63
00:05:13.876 --> 00:05:17.981
次に最後の行だけを、標準的な形へ置き換えます。

64
00:05:17.981 --> 00:05:24.048
新しい値は、大きさ一レム、行間一・六倍、書体は同じ、という内容です。

65
00:05:24.048 --> 00:05:28.510
すると、斜体が消えて文字がまっすぐになり、太さも標準に戻り、全体が少し小さく、

66
00:05:28.510 --> 00:05:32.971
行間も少し詰まります。

67
00:05:32.971 --> 00:05:38.147
ここで注目してほしいのは、斜体と太さは、消せと明示したわけではなく、書かなかったために初期値に戻った、

68
00:05:38.147 --> 00:05:43.322
という点です。

69
00:05:43.322 --> 00:05:49.033
前のスライドで学んだ初期化の仕組みが、まさにここで起きています。

70
00:05:49.033 --> 00:05:56.528
変更後は保存して再読み込みし、二つの見え方の違いを自分の言葉で説明してみてください。

71
00:05:56.528 --> 00:05:58.727
間違えやすい点を確認します。

72
00:05:58.727 --> 00:06:00.927
代表的な失敗は三つあります。

73
00:06:00.927 --> 00:06:06.111
一つ目は、大きさや書体を書き忘れて、宣言全体が無効になることです。

74
00:06:06.111 --> 00:06:12.709
二つ目は、順番の間違いで、行間のスラッシュを大きさの直後以外に置いてしまうことです。

75
00:06:12.709 --> 00:06:19.778
三つ目は、先ほどの初期化で、先に書いた太さや斜体が、後のフォントに消されてしまうことです。

76
00:06:19.778 --> 00:06:26.298
指定が効かないと感じたら、開発者ツールで、ネットワーク、エレメンツ、スタイルズ、

77
00:06:26.298 --> 00:06:32.817
コンピューテッドの順に調べ、打ち消し線の付いた宣言や無効な行がないかを確認しましょう。

78
00:06:32.817 --> 00:06:36.745
狭い画面幅や文字拡大でも読めるかの確認も大切です。

79
00:06:36.745 --> 00:06:40.986
特に、フォントの後ろに個別の指定を足す書き方は、実際の制作でもよく使うので、

80
00:06:40.986 --> 00:06:45.228
順番ごと覚えておくと役立ちます。

81
00:06:45.228 --> 00:06:47.393
ブラウザー互換性を確認します。

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

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

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

85
00:07:03.557 --> 00:07:10.485
とても歴史の長いプロパティなので、今回使った基本の書き方は、安心して使えると考えてよいでしょう。

86
00:07:10.485 --> 00:07:16.835
ただし、プロパティが使えることと、すべての値や新しい書体の指定方法が使えることは別です。

87
00:07:16.835 --> 00:07:21.309
珍しい値を追加する場合は、その値ごとの対応も確認してください。

88
00:07:21.309 --> 00:07:25.495
スマートフォンでも同じ記録が古い版から続いているため、画面の大小を問わず、

89
00:07:25.495 --> 00:07:29.680
同じ書き方で文字の見た目をそろえられます。

90
00:07:29.680 --> 00:07:31.621
最後に練習とまとめです。

91
00:07:31.621 --> 00:07:32.592
まとめます。

92
00:07:32.592 --> 00:07:39.063
フォントは、文字まわりの設定を一行にまとめる一括指定で、親から子へ継承しました。

93
00:07:39.063 --> 00:07:45.049
大きさと書体が必須で、書かなかった設定は初期値に戻る点が最大の特徴でした。

94
00:07:45.049 --> 00:07:49.660
練習として、まず二つの値の違いを言葉で説明し、次に太さだけ、行間だけと、

95
00:07:49.660 --> 00:07:54.271
一か所ずつ変えて結果を比べてみてください。

96
00:07:54.271 --> 00:07:55.727
お疲れさまでした。

97
00:07:55.727 --> 00:08:01.390
関連するフォントサイズやフォントファミリー、ラインハイトを個別に学ぶと、

98
00:08:01.390 --> 00:08:07.052
一括指定の中身が一つずつ理解できて、使い分けが確かなものになります。