WEBVTT

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

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

3
00:00:04.040 --> 00:00:06.902
今回のテーマは、ラインハイトです。

4
00:00:06.902 --> 00:00:14.141
これは、文章の1行分の高さを決めるプロパティで、行と行の間隔、つまり行間を調整します。

5
00:00:14.141 --> 00:00:21.548
行間が詰まり過ぎていると文章は窮屈に感じ、逆に広げ過ぎると間延びして読みにくくなります。

6
00:00:21.548 --> 00:00:27.104
今回は、一・九という広めの値と、一・二という詰まった値を比べながら、基本の書き方から注意点まで、

7
00:00:27.104 --> 00:00:32.659
初心者向けに分かりやすく解説します。

8
00:00:32.659 --> 00:00:37.036
文字の大きさは変えなくても、行の高さひとつで読みやすさが大きく変わることを、

9
00:00:37.036 --> 00:00:41.413
実例で確かめていきましょう。

10
00:00:41.413 --> 00:00:48.652
本文の読みやすさを整える作業は、実際のサイト制作でも欠かせない、基本のテクニックです。

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

12
00:00:50.354 --> 00:00:54.841
書き方はとてもシンプルで、ラインハイトの後ろにコロンを書き、高さの値をひとつだけ書いて、

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

14
00:00:59.328 --> 00:01:04.124
スライドの例では、デモというクラスに、一・九を指定しています。

15
00:01:04.124 --> 00:01:10.932
単位を付けないこの書き方では、文字サイズに一・九を掛けた高さが、1行分の高さになります。

16
00:01:10.932 --> 00:01:16.657
クラス名のドットや波かっこを書き忘れると効かないので、まずはこの三行をそのまま書き、

17
00:01:16.657 --> 00:01:22.382
ブラウザーで複数行の文章の間隔が広がる様子を確かめてみましょう。

18
00:01:22.382 --> 00:01:28.880
値の前後に半角スペースを入れておくと、後から読み返したときにも分かりやすくなります。

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

20
00:01:31.281 --> 00:01:36.534
大きく分けて、ノーマル、単位なしの数値、長さ、割合の四通りがあります。

21
00:01:36.534 --> 00:01:41.787
ノーマルは、ブラウザーやフォントが決める標準の高さで表示する指定です。

22
00:01:41.787 --> 00:01:45.990
単位なしの数値は、その要素の文字サイズに対する倍率です。

23
00:01:45.990 --> 00:01:52.143
長さはピクセルなどの単位付き、割合はパーセントで文字サイズに対する比率を示します。

24
00:01:52.143 --> 00:01:59.047
同じ一・九でも、書き方によって継承のされ方が変わる点が、このプロパティの大切なポイントです。

25
00:01:59.047 --> 00:02:06.852
迷ったときは、まず単位なしの数値から始め、ノーマルと見比べる手順が、初心者には一番分かりやすい方法です。

26
00:02:06.852 --> 00:02:10.105
単位なしの数値がおすすめな理由を補足します。

27
00:02:10.105 --> 00:02:13.802
単位なしで書くと、継承されるのは倍率そのものです。

28
00:02:13.802 --> 00:02:18.386
たとえば親に一・七と書けば、文字が大きな見出しの子要素でも、その文字サイズに一・七を掛けた高さが確保され、

29
00:02:18.386 --> 00:02:22.970
行が詰まりません。

30
00:02:22.970 --> 00:02:28.590
一方、ピクセルなどの固定値を親から継承すると、高さがそのまま引き継がれます。

31
00:02:28.590 --> 00:02:35.244
大きな文字の子要素では、文字に対して行の高さが足りず、上下が詰まって見えることがあります。

32
00:02:35.244 --> 00:02:44.560
本文全体に効かせたいときほど、単位なしの倍率で書く習慣を付けておくと、文字サイズが変わる場面でもバランスが崩れにくくなります。

33
00:02:44.560 --> 00:02:46.571
初期値と継承を確認します。

34
00:02:46.571 --> 00:02:52.603
初期値はノーマルで、指定しなければブラウザーが決める標準の高さで表示されます。

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

36
00:02:56.160 --> 00:03:01.883
親の要素に書けば、その中にある見出しや文章にも同じ考え方が引き継がれます。

37
00:03:01.883 --> 00:03:10.390
便利な反面、さきほど説明したように、固定値を広い範囲に書いてしまうと、大きな文字の場所で詰まることがあります。

38
00:03:10.390 --> 00:03:16.113
継承を取り消したい要素には、改めてノーマルや別の倍率を書き直してください。

39
00:03:16.113 --> 00:03:26.012
また、インヘリットやイニシャルといった共通のキーワードも使えますが、まずはノーマルと単位なし数値の違いをしっかり押さえましょう。

40
00:03:26.012 --> 00:03:28.128
ここからは記事の実例です。

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

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

43
00:03:41.396 --> 00:03:46.361
折り返して複数行になる長さにしてあります。

44
00:03:46.361 --> 00:03:54.013
複数行あるからこそ、行の高さを変えたときに、行間と文章全体の高さがどう変わるかを観察できます。

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

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

47
00:04:03.943 --> 00:04:08.664
行間は複数行で初めて見える効果なので、この準備が大切です。

48
00:04:08.664 --> 00:04:10.611
土台のシーエスエスです。

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

50
00:04:16.940 --> 00:04:21.889
最後の行でラインハイトに一・九を指定すると、1行ごとの高さが文字サイズの一・九倍になり、

51
00:04:21.889 --> 00:04:26.838
行と行の間がゆったりと広がります。

52
00:04:26.838 --> 00:04:33.816
色や余白は一切変えていないのに、文章全体の高さが伸びて、読みやすく感じられるはずです。

53
00:04:33.816 --> 00:04:38.684
ファイルを保存してブラウザーを再読み込みし、行間の広さと、箱全体の高さの二点が同時に変わる様子を、

54
00:04:38.684 --> 00:04:43.552
よく観察してください。

55
00:04:43.552 --> 00:04:50.692
行間が広がると視線の上下移動は増えるものの、行を読み違えるミスが減る効果も期待できます。

56
00:04:50.692 --> 00:04:54.771
次に最後の行だけを、一・二へ置き換えます。

57
00:04:54.771 --> 00:05:00.985
すると、広がっていた行間が詰まり、文章全体の高さも低くなります。

58
00:05:00.985 --> 00:05:07.977
行同士が近付くため、上の行と下の行を読み間違えやすくなるかもしれません。

59
00:05:07.977 --> 00:05:12.638
ここで大切なのは、文字の大きさや色は同じでも、行の高さだけで読みやすさが変わる、

60
00:05:12.638 --> 00:05:17.299
という実感です。

61
00:05:17.299 --> 00:05:24.291
広ければ良いわけではなく、文章の長さや文字の大きさに合った値が最適です。

62
00:05:24.291 --> 00:05:31.283
一般に日本語の本文では、一・六から一・九程度が読みやすい目安とされます。

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

64
00:05:39.440 --> 00:05:41.745
間違えやすい点を確認します。

65
00:05:41.745 --> 00:05:46.355
一番多い失敗は、ピクセルなどの固定値を親に書き、それを大きな文字の子要素が継承して、

66
00:05:46.355 --> 00:05:50.964
行が詰まってしまうことです。

67
00:05:50.964 --> 00:05:55.574
本文では単位なしの倍率に書き直すと解決しやすくなります。

68
00:05:55.574 --> 00:06:01.665
二つ目は、セレクターの不一致や、別の宣言に上書きされて効かないケースです。

69
00:06:01.665 --> 00:06:08.662
効かないと感じたら、開発者ツールで、ネットワーク、エレメンツ、スタイルズ、

70
00:06:08.662 --> 00:06:15.659
コンピューテッドの順に調べ、対象の宣言が残っているか、最終的な計算値がいくつかを確認しましょう。

71
00:06:15.659 --> 00:06:20.763
狭い画面幅や文字拡大でも行が重ならず読めるかの確認も大切です。

72
00:06:20.763 --> 00:06:27.348
特に単一行の見出しでは、行の高さが要素の高さに影響する点も合わせて見てください。

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

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

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

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

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

78
00:06:53.399 --> 00:06:59.354
ただし、プロパティが使えることと、すべての値や新しい書き方が使えることは別です。

79
00:06:59.354 --> 00:07:04.267
珍しい指定を追加する場合は、その部分の対応も別に確認してください。

80
00:07:04.267 --> 00:07:09.328
広く使えるため、行間の調整は表示確認の負担が少ない装飾のひとつです。

81
00:07:09.328 --> 00:07:11.399
最後に練習とまとめです。

82
00:07:11.399 --> 00:07:12.434
まとめます。

83
00:07:12.434 --> 00:07:20.028
ラインハイトは、行の高さを決めるプロパティで、初期値はノーマル、親から子へ継承しました。

84
00:07:20.028 --> 00:07:27.104
単位なしの数値は文字サイズの倍率として働き、継承しても詰まりにくいのが利点でした。

85
00:07:27.104 --> 00:07:32.454
練習として、まず一・九と一・二の違いを言葉で説明し、次に文章量や親の幅だけを変えて、

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

87
00:07:37.804 --> 00:07:39.357
お疲れさまでした。

88
00:07:39.357 --> 00:07:47.986
関連するフォントやレタースペーシングも合わせて学ぶと、文字まわりの整え方がより確かなものになります。

89
00:07:47.986 --> 00:07:55.580
行間を自分で調整できるようになると、長い本文でも読みやすいページを作れるようになります。