WEBVTT

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

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

3
00:00:03.631 --> 00:00:06.355
今回のテーマは、フォントサイズです。

4
00:00:06.355 --> 00:00:09.684
これは、文字の大きさを決めるプロパティです。

5
00:00:09.684 --> 00:00:18.762
見出しを大きくして目立たせたり、本文を読みやすい大きさに整えたりと、文字のあるページでは毎回のように使う基本の指定です。

6
00:00:18.762 --> 00:00:24.133
今回は、一点五レムと一レムを比べながら、基本の書き方から、レムとイーエムの違い、

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

8
00:00:29.505 --> 00:00:35.708
文字が大きくなると、行の折り返し位置や要素の高さまで変わる点にも注目してください。

9
00:00:35.708 --> 00:00:39.642
大きさは、情報の優先順位を伝える大切な手がかりです。

10
00:00:39.642 --> 00:00:46.300
小さすぎると読みにくく、大きすぎると行が窮屈になるので、バランスを考えることが大切です。

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

12
00:00:47.883 --> 00:00:51.553
フォントサイズの後ろにコロンを書き、値として一点五レムをひとつだけ書いて、

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

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

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

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

17
00:01:14.653 --> 00:01:17.963
一行で文字の印象がぐっと変わるのが分かります。

18
00:01:17.963 --> 00:01:23.288
慣れてきたら、数字だけを少しずつ変えて、見え方の変化を比べてみてください。

19
00:01:23.288 --> 00:01:25.978
指定できる値を読み解きましょう。

20
00:01:25.978 --> 00:01:28.331
大きく分けて三種類あります。

21
00:01:28.331 --> 00:01:34.047
一つ目は長さで、ピクセルやレムのように、数値に単位を付けて書きます。

22
00:01:34.047 --> 00:01:39.931
二つ目は割合で、パーセントで書くと親の文字サイズを基準に計算されます。

23
00:01:39.931 --> 00:01:45.815
三つ目はキーワードで、スモールやラージといった言葉で段階的に選べます。

24
00:01:45.815 --> 00:01:49.682
ふだんの制作では、本文や見出しの大きさをレムでそろえて指定するのが扱いやすく、

25
00:01:49.682 --> 00:01:53.548
おすすめです。

26
00:01:53.548 --> 00:01:59.600
まずはレムを中心に覚え、必要な場面でほかの書き方を追加していきましょう。

27
00:01:59.600 --> 00:02:04.980
値を切り替えて、同じ文章がどう変わるか比べると理解が深まります。

28
00:02:04.980 --> 00:02:07.794
単位の違いをもう少し詳しく見ます。

29
00:02:07.794 --> 00:02:13.918
レムは、エイチティーエムエル要素、つまりルートの文字サイズを基準にします。

30
00:02:13.918 --> 00:02:18.718
ページ全体で基準がひとつなので、予想しやすいのが特長です。

31
00:02:18.718 --> 00:02:24.015
一方、イーエムとパーセントは、親要素の文字サイズを基準にします。

32
00:02:24.015 --> 00:02:32.622
親もイーエムで指定されていると、入れ子になるほど大きさが掛け算のように積み重なってしまうことがあります。

33
00:02:32.622 --> 00:02:37.836
初心者のうちは、全体の大きさはレムで管理し、親からの相対的な調整が本当に必要な場所だけでイーエムを使うと、

34
00:02:37.836 --> 00:02:43.050
混乱を避けられます。

35
00:02:43.050 --> 00:02:46.360
基準を意識して単位を選ぶことが大切です。

36
00:02:46.360 --> 00:02:48.439
初期値と継承を確認します。

37
00:02:48.439 --> 00:02:54.518
初期値はミディアムで、多くのブラウザーでは十六ピクセル前後が目安とされます。

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

39
00:02:58.196 --> 00:03:04.754
親の要素に大きさを書けば、その中にある見出しや文章にもその大きさが引き継がれます。

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

41
00:03:11.632 --> 00:03:16.911
一部分だけ変えたいときは、その要素に改めて値を書き直してください。

42
00:03:16.911 --> 00:03:25.868
また、インヘリットやイニシャルといった共通のキーワードも使えますが、まずはレムでの指定をしっかり押さえましょう。

43
00:03:25.868 --> 00:03:27.969
ここからは記事の実例です。

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

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

46
00:03:42.839 --> 00:03:50.597
文章が長めなので、文字が大きくなると行の折り返しが変わり、箱の高さまで変わる様子を観察できます。

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

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

49
00:04:00.456 --> 00:04:03.366
まずは土台をそのまま用意しましょう。

50
00:04:03.366 --> 00:04:08.376
親と子の入れ子の構造が、このあとの継承の理解にもつながります。

51
00:04:08.376 --> 00:04:10.268
土台のシーエスエスです。

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

53
00:04:16.417 --> 00:04:23.038
最後の行でフォントサイズに一点五レムを指定すると、文字が標準より大きく表示されます。

54
00:04:23.038 --> 00:04:30.763
まずは文章がはっきりと大きく見え、一行に入る文字数が減って折り返しが増えることに注目してください。

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

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

57
00:04:41.642 --> 00:04:45.268
箱の高さが伸びる様子も合わせて確認しましょう。

58
00:04:45.268 --> 00:04:48.119
次に最後の行だけを、一レムへ置き換えます。

59
00:04:48.119 --> 00:04:51.378
すると、大きかった文字が標準の大きさに戻ります。

60
00:04:51.378 --> 00:04:54.840
一点五レムのときと比べると、文章がコンパクトに見え、一行に入る文字数が増えて、

61
00:04:54.840 --> 00:04:58.302
箱の高さも低くなります。

62
00:04:58.302 --> 00:05:02.036
ここで大切なのは、色や太さは同じでも、大きさひとつで読みやすさとページ全体のバランスが変わる、

63
00:05:02.036 --> 00:05:05.769
という実感です。

64
00:05:05.769 --> 00:05:11.336
見出しは大きめ、本文は一レム前後という組み合わせは、強弱を付ける基本パターンです。

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

66
00:05:16.088 --> 00:05:20.840
スクリーンショットで並べて比べると、違いがさらに分かりやすくなります。

67
00:05:20.840 --> 00:05:23.118
間違えやすい点を確認します。

68
00:05:23.118 --> 00:05:30.277
代表的なのは、画面幅を基準にするブイダブリューだけで本文の大きさを決めてしまうことです。

69
00:05:30.277 --> 00:05:34.588
この書き方だと、利用者がブラウザーで文字を拡大しても、思ったように大きくならず、

70
00:05:34.588 --> 00:05:38.900
読みにくさにつながります。

71
00:05:38.900 --> 00:05:47.035
画面幅に応じて大きさを変えたいときは、クランプ関数を使い、その中にレムを含めておくのがポイントです。

72
00:05:47.035 --> 00:05:52.404
そうすれば、画面幅に合わせつつ、文字拡大にも対応しやすくなります。

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

74
00:05:58.099 --> 00:06:03.468
開発者ツールで、スタイルズとコンピューテッドを順に確認しましょう。

75
00:06:03.468 --> 00:06:05.544
ブラウザー互換性を確認します。

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

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

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

79
00:06:21.045 --> 00:06:27.273
とても歴史の長いプロパティなので、今回使ったレムでの基本の書き方は安心して使えるでしょう。

80
00:06:27.273 --> 00:06:32.947
ただし、プロパティが使えることと、すべての値や関数が同じように使えることは別です。

81
00:06:32.947 --> 00:06:39.314
クランプ関数のような比較的新しい書き方を使うときは、対象ブラウザーで個別に確認してください。

82
00:06:39.314 --> 00:06:44.296
スマートフォンでも同じ指定が使えるので、実機での確認も習慣にしましょう。

83
00:06:44.296 --> 00:06:46.385
最後に練習とまとめです。

84
00:06:46.385 --> 00:06:47.429
まとめます。

85
00:06:47.429 --> 00:06:51.607
フォントサイズは、文字の大きさを決めるプロパティで、初期値はミディアム、

86
00:06:51.607 --> 00:06:55.784
親から子へ継承しました。

87
00:06:55.784 --> 00:07:01.528
レムはルート基準で扱いやすく、イーエムとパーセントは親基準でした。

88
00:07:01.528 --> 00:07:07.098
練習として、まず一点五レムと一レムの違いを言葉で説明し、次に文章量や親の幅だけを変えて、

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

90
00:07:12.668 --> 00:07:14.235
お疲れさまでした。

91
00:07:14.235 --> 00:07:23.286
関連するフォントファミリーやラインハイトも合わせて学ぶと、文字まわりの整え方がより確かなものになります。

92
00:07:23.286 --> 00:07:29.204
自分のページでも、見出しだけを大きく変えて効果を確かめてみましょう。