WEBVTT

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

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

3
00:00:03.518 --> 00:00:06.157
今回のテーマは、ロウ・ギャップです。

4
00:00:06.157 --> 00:00:11.875
これは行と行の間、つまり縦方向に並んだ項目同士のすき間を決めるプロパティです。

5
00:00:11.875 --> 00:00:15.100
グリッドやフレックスボックスで利用できます。

6
00:00:15.100 --> 00:00:19.278
この動画では、1.5レムという広めの間隔と、0.25レムという狭い間隔を比べて、

7
00:00:19.278 --> 00:00:23.457
見た目がどう変わるかを確認します。

8
00:00:23.457 --> 00:00:30.200
カードが上下に並んだとき、くっついて見えるか、ゆったり見えるかは、この値で大きく変わります。

9
00:00:30.200 --> 00:00:36.211
基本の書き方、指定できる値、実例、効かないときの確認まで、順番に見ていきましょう。

10
00:00:36.211 --> 00:00:42.222
商品カードや写真の一覧など、複数行の配置は身近なページのあちこちで使われています。

11
00:00:42.222 --> 00:00:46.180
その並びの呼吸を整えるのが、このプロパティの役割です。

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

13
00:00:47.954 --> 00:00:53.597
セレクターのあとに、ロウ・ギャップ、コロン、値、セミコロンを書きます。

14
00:00:53.597 --> 00:00:59.564
スライドの例では、デモというクラスを持つ要素に1.5レムを指定しています。

15
00:00:59.564 --> 00:01:01.982
ここで大切なのは書く場所です。

16
00:01:01.982 --> 00:01:08.432
ロウ・ギャップは、並べられる子ではなく、並べ方を決める親のコンテナーに書きます。

17
00:01:08.432 --> 00:01:13.028
親がグリッドやフレックスとして項目を配置し、その行同士の間隔をこの一行で調整する、

18
00:01:13.028 --> 00:01:17.623
という役割分担を覚えてください。

19
00:01:17.623 --> 00:01:23.912
一つ前のカーラム・ギャップと対になるプロパティで、こちらは縦方向を担当します。

20
00:01:23.912 --> 00:01:26.775
ロウ・ギャップが効く場面を整理します。

21
00:01:26.775 --> 00:01:31.596
第一はグリッドで、行トラックと行トラックの間のすき間になります。

22
00:01:31.596 --> 00:01:33.856
第二はフレックスボックスです。

23
00:01:33.856 --> 00:01:41.239
ただしフレックスでは、並べる方向と折り返しの有無によって、どちらの隙間として見えるかが変わります。

24
00:01:41.239 --> 00:01:47.265
横並びで折り返せば行間の隙間になり、縦並びでは項目同士の縦の間隔として現れます。

25
00:01:47.265 --> 00:01:51.333
共通しているのは、縦方向に複数の行が存在することです。

26
00:01:51.333 --> 00:01:57.963
行が一つしかなければ、行の間そのものが存在しないため、値を変えても見た目は変わりません。

27
00:01:57.963 --> 00:02:04.291
まず親の中に行がいくつあるか、軸がどちらを向いているかを確認する習慣をつけましょう。

28
00:02:04.291 --> 00:02:09.564
学習のときは二行、三行程度のシンプルな例から始めると分かりやすいです。

29
00:02:09.564 --> 00:02:11.496
指定できる値を見ていきます。

30
00:02:11.496 --> 00:02:15.359
ノーマルは、間隔をレイアウト方式の標準に任せる指定です。

31
00:02:15.359 --> 00:02:21.429
実際の間隔は方式によって違い、グリッドやフレックスでは詰まった状態になることがあります。

32
00:02:21.429 --> 00:02:27.637
次に、1.5レムや16ピクセルのような長さで、間隔を直接指定する方法が最もよく使われます。

33
00:02:27.637 --> 00:02:33.846
さらに、パーセントで割合を指定することもでき、その場合はコンテナーの高さが基準になります。

34
00:02:33.846 --> 00:02:35.639
マイナスの長さは無効です。

35
00:02:35.639 --> 00:02:41.296
迷ったら、まずはレム単位の長さで指定し、広い、狭いを感覚でつかむのがおすすめです。

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

37
00:02:43.549 --> 00:02:48.573
ロウ・ギャップの初期値はノーマルで、通常の継承はしません。

38
00:02:48.573 --> 00:02:56.717
親に書いた間隔が子へ自動で受け継がれることはないので、間隔がほしいコンテナーごとに指定します。

39
00:02:56.717 --> 00:02:59.836
一括指定ギャップとの関係も重要です。

40
00:02:59.836 --> 00:03:08.153
ギャップは、行の間隔ロウ・ギャップと、列の間隔カーラム・ギャップをまとめて書けるプロパティです。

41
00:03:08.153 --> 00:03:16.297
先にギャップで全体を指定し、あとからロウ・ギャップだけを書けば、縦の間隔だけを上書きできます。

42
00:03:16.297 --> 00:03:23.228
逆の順番で書くと、ギャップ側に上書きされるので、宣言の順番には注意してください。

43
00:03:23.228 --> 00:03:24.764
実例を見ていきます。

44
00:03:24.764 --> 00:03:27.530
まずエイチティーエムエルの用意です。

45
00:03:27.530 --> 00:03:33.061
ステージという外側の箱の中にデモがあり、その中に項目が六つ入っています。

46
00:03:33.061 --> 00:03:38.285
頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。

47
00:03:38.285 --> 00:03:41.050
親と子の構造そのものが例の一部です。

48
00:03:41.050 --> 00:03:46.735
このあとデモを三列のグリッドにするので、六つの項目は三列、二行に並びます。

49
00:03:46.735 --> 00:03:49.961
行が二つあれば、行の間は一か所生まれます。

50
00:03:49.961 --> 00:03:56.568
その一か所のすき間が、ロウ・ギャップで広がったり狭まったりする様子に注目してください。

51
00:03:56.568 --> 00:04:01.130
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

52
00:04:01.130 --> 00:04:07.899
デモはディスプレイ、グリッドで三列に並び、土台としてギャップ、0.5レムが指定されています。

53
00:04:07.899 --> 00:04:14.374
そして主役は最後の行で、ロウ・ギャップに1.5レムを指定し、縦の間隔だけを広げています。

54
00:04:14.374 --> 00:04:19.377
横の列間は0.5レムのまま、縦だけがゆったり広がるのがポイントです。

55
00:04:19.377 --> 00:04:24.969
項目は白い背景なので、行の間の緑色のすき間が広がったことが一目で分かります。

56
00:04:24.969 --> 00:04:29.237
土台の指定は共通なので、最後の一行だけに注目してください。

57
00:04:29.237 --> 00:04:33.136
なお、行と列で間隔を分けられるため、縦を広く、横を狭くといった細かな調整も、

58
00:04:33.136 --> 00:04:37.036
この組み合わせで実現できます。

59
00:04:37.036 --> 00:04:39.439
値を変えて比べてみましょう。

60
00:04:39.439 --> 00:04:45.790
最後のロウ・ギャップの値だけを、1.5レムから0.25レムへ置き換えます。

61
00:04:45.790 --> 00:04:50.511
ファイルを保存してブラウザーを再読み込みすると、行と行の間隔がぐっと狭まり、

62
00:04:50.511 --> 00:04:55.231
上下の項目同士が近づいて見えます。

63
00:04:55.231 --> 00:05:01.067
エイチティーエムエルは一切変えていませんし、列の間隔もそのままです。

64
00:05:01.067 --> 00:05:04.672
縦のすき間だけが変わることが確認できます。

65
00:05:04.672 --> 00:05:09.306
間隔を狭めると、全体の高さも少しコンパクトになります。

66
00:05:09.306 --> 00:05:14.456
比較のコツは、いつも通り、変える値を一つだけにすることです。

67
00:05:14.456 --> 00:05:16.380
間違えやすい点を整理します。

68
00:05:16.380 --> 00:05:22.562
まず、ロウ・ギャップは項目の外側につけるマージンでも、内側の余白パディングでもありません。

69
00:05:22.562 --> 00:05:26.410
行と行の間だけに生まれる間隔で、端の外側には付きません。

70
00:05:26.410 --> 00:05:33.554
次に、行が一つしかないレイアウトでは、そもそも行の間が存在しないため、値を変えても見た目は変わりません。

71
00:05:33.554 --> 00:05:36.852
効いていないのではなく、働く場所がないだけです。

72
00:05:36.852 --> 00:05:41.180
さらに、フレックスボックスでは方向と折り返しによって見え方が変わるので、

73
00:05:41.180 --> 00:05:45.508
軸を確認してからカーラム・ギャップと使い分けましょう。

74
00:05:45.508 --> 00:05:51.828
ギャップの一括指定をあとに書くと、ロウ・ギャップが上書きされてしまう点にも注意してください。

75
00:05:51.828 --> 00:05:53.804
効かないときの確認手順です。

76
00:05:53.804 --> 00:06:00.157
まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。

77
00:06:00.157 --> 00:06:05.381
次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。

78
00:06:05.381 --> 00:06:12.016
スタイルズで宣言が無効になっていないか、ギャップなど別の宣言に上書きされていないかも重要です。

79
00:06:12.016 --> 00:06:16.816
コンピューテッドでロウ・ギャップの最終的な値を確認し、親の表示方式がグリッドやフレックスになっているか、

80
00:06:16.816 --> 00:06:21.616
行がいくつあるかも調べましょう。

81
00:06:21.616 --> 00:06:27.122
グリッドの表示機能を使うと、明示トラックと暗黙トラックを見分けやすくなります。

82
00:06:27.122 --> 00:06:33.616
最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容が利用できるかを確かめてください。

83
00:06:33.616 --> 00:06:35.604
最後に互換性とまとめです。

84
00:06:35.604 --> 00:06:40.268
ロウ・ギャップは、記事ではクローム47以降、ファイアフォックス52以降、

85
00:06:40.268 --> 00:06:44.932
サファリ10.1以降などの記録が紹介されています。

86
00:06:44.932 --> 00:06:50.743
グリッドの文脈ではクローム66以降、フレックスの文脈ではクローム84以降、

87
00:06:50.743 --> 00:06:56.554
サファリ14.1以降で対応がそろい、現在の主要ブラウザーでは安心して使えます。

88
00:06:56.554 --> 00:07:05.424
練習は、まず1.5レムと0.25レムの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。

89
00:07:05.424 --> 00:07:06.342
まとめます。

90
00:07:06.342 --> 00:07:09.706
ロウ・ギャップは行同士の縦の間隔を決めるプロパティで、初期値はノーマル、

91
00:07:09.706 --> 00:07:13.070
継承はしません。

92
00:07:13.070 --> 00:07:18.728
関連するカーラム・ギャップとギャップもあわせて確認すると理解が深まります。

93
00:07:18.728 --> 00:07:24.539
間隔は見た目の余白であると同時に、項目同士の区切りを示す大切な手がかりです。

94
00:07:24.539 --> 00:07:29.892
広すぎず狭すぎない値を選ぶ感覚も、練習を通して身につけていきましょう。

95
00:07:29.892 --> 00:07:31.268
お疲れさまでした。