WEBVTT

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

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

3
00:00:03.883 --> 00:00:06.311
今回のテーマは、ギャップです。

4
00:00:06.311 --> 00:00:11.488
これは項目と項目の間に入るすき間をまとめて決めるプロパティです。

5
00:00:11.488 --> 00:00:19.094
グリッドやフレックスボックスで、カード同士がくっつきすぎないように間隔を空けるときに使います。

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

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

8
00:00:28.317 --> 00:00:33.495
ギャップは、行の間隔と列の間隔を一度に書ける便利な一括指定です。

9
00:00:33.495 --> 00:00:40.776
基本の書き方、値が一つと二つの違い、実例、効かないときの確認まで、順番に見ていきましょう。

10
00:00:40.776 --> 00:00:47.572
カード一覧や写真一覧など、身近なページのあちこちで、この間隔の調整が使われています。

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

12
00:00:49.351 --> 00:00:54.526
セレクターのあとに、ギャップ、コロン、値、セミコロンを書きます。

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

14
00:01:00.510 --> 00:01:02.935
ここで大切なのは書く場所です。

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

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

17
00:01:13.609 --> 00:01:18.299
という役割分担を覚えてください。

18
00:01:18.299 --> 00:01:25.253
一つずつ子に余白をつける方法とは違い、親の一行で全体の間隔をそろえられるのが強みです。

19
00:01:25.253 --> 00:01:29.538
この書き方は、前のロウ・ギャップやカーラム・ギャップとまったく同じ形なので、

20
00:01:29.538 --> 00:01:33.824
覚える負担も小さくて済みます。

21
00:01:33.824 --> 00:01:36.784
指定できる値の読み方を確認します。

22
00:01:36.784 --> 00:01:40.614
ギャップには長さや割合を一つか二つ書けます。

23
00:01:40.614 --> 00:01:45.838
一つだけ書いた場合は、行の間隔も列の間隔も同じ値になります。

24
00:01:45.838 --> 00:01:55.414
二つ書いた場合は、順番が決まっていて、一番目が行の間隔ロウ・ギャップ、二番目が列の間隔カーラム・ギャップです。

25
00:01:55.414 --> 00:02:00.986
たとえば縦は広く、横は狭くしたいときは、二つの値を使い分けます。

26
00:02:00.986 --> 00:02:06.557
割合を使うときは、行はコンテナーの高さ、列は幅が基準になります。

27
00:02:06.557 --> 00:02:10.214
マイナスの値は無効なので注意してください。

28
00:02:10.214 --> 00:02:17.004
迷ったら、まずはレム単位で一つだけ書き、全体の雰囲気をつかむのがおすすめです。

29
00:02:17.004 --> 00:02:19.273
初期値と継承を確認します。

30
00:02:19.273 --> 00:02:28.001
ギャップの初期値は、それを構成するロウ・ギャップとカーラム・ギャップ、それぞれの初期値を参照します。

31
00:02:28.001 --> 00:02:34.983
通常の継承はしないので、親に書いた間隔が子へ自動で受け継がれることはありません。

32
00:02:34.983 --> 00:02:38.998
間隔がほしいコンテナーごとに指定してください。

33
00:02:38.998 --> 00:02:47.376
また、ギャップで全体を指定したあとに、ロウ・ギャップだけを書けば、縦の間隔だけを上書きできます。

34
00:02:47.376 --> 00:02:53.311
逆に、個別指定のあとにギャップを書くと、ギャップ側で上書きされます。

35
00:02:53.311 --> 00:02:59.944
宣言の順番で結果が変わる点は、前の二つの動画とも共通する大切なポイントです。

36
00:02:59.944 --> 00:03:02.220
ギャップが効く場面を整理します。

37
00:03:02.220 --> 00:03:06.631
代表はグリッドで、行と列の両方のすき間をまとめて調整できます。

38
00:03:06.631 --> 00:03:12.892
フレックスボックスでも使え、横並びの項目の間や、折り返したときの行間に間隔が生まれます。

39
00:03:12.892 --> 00:03:16.022
複数列に文章を分ける段組みでも利用できます。

40
00:03:16.022 --> 00:03:21.286
一方で、通常のブロック配置の要素に付けるだけでは、同じ効果は得られません。

41
00:03:21.286 --> 00:03:25.839
ブロックでは項目同士の間にトラックや並びの仕組みがないためです。

42
00:03:25.839 --> 00:03:32.526
効かないと感じたら、まず親のディスプレイがグリッドかフレックスになっているかを確認しましょう。

43
00:03:32.526 --> 00:03:35.372
この確認が、原因探しの第一歩になります。

44
00:03:35.372 --> 00:03:37.116
実例を見ていきます。

45
00:03:37.116 --> 00:03:40.256
まずエイチティーエムエルの用意です。

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

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

48
00:03:52.468 --> 00:03:55.608
親と子の構造そのものが例の一部です。

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

50
00:04:02.062 --> 00:04:08.255
列の間が二か所、行の間が一か所生まれるので、縦と横の両方のすき間がギャップでどう変わるかを、

51
00:04:08.255 --> 00:04:14.448
一つの画面でまとめて観察できる構成になっています。

52
00:04:14.448 --> 00:04:21.600
項目の数と列数が分かると、行数が先に予想できるので、変化を読み取りやすくなります。

53
00:04:21.600 --> 00:04:26.650
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

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

55
00:04:34.145 --> 00:04:41.476
そして主役は最後の行で、ギャップに1.5レムを指定し、縦と横の間隔をまとめて広げています。

56
00:04:41.476 --> 00:04:49.459
項目は白い背景なので、項目の間に見える緑色のすき間が、縦にも横にも広がったことが一目で分かります。

57
00:04:49.459 --> 00:04:55.650
土台の指定は違いを見やすくするためのもので、比較の対象は最後の一行だけです。

58
00:04:55.650 --> 00:05:00.700
一行で両方向をそろえられる手軽さが、ギャップの一番の魅力です。

59
00:05:00.700 --> 00:05:03.161
値を変えて比べてみましょう。

60
00:05:03.161 --> 00:05:09.139
最後のギャップの値だけを、1.5レムから0.25レムへ置き換えます。

61
00:05:09.139 --> 00:05:13.886
ファイルを保存してブラウザーを再読み込みすると、行の間も列の間もぐっと狭まり、

62
00:05:13.886 --> 00:05:18.633
六つの項目が密集して見えます。

63
00:05:18.633 --> 00:05:22.325
エイチティーエムエルは一切変えていません。

64
00:05:22.325 --> 00:05:29.709
間隔を狭めると全体の幅や高さの使われ方も変わり、同じ三列でも印象が大きく変わります。

65
00:05:29.709 --> 00:05:36.566
広い間隔はゆったりと区切りが分かりやすく、狭い間隔はコンパクトにまとまります。

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

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

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

69
00:05:51.089 --> 00:05:56.539
項目と項目の間だけに生まれる間隔で、並びの端の外側には付きません。

70
00:05:56.539 --> 00:06:04.631
そのため、端のそろいを保ったまま間だけを調整でき、最後の項目だけ余白を消すような手間もいりません。

71
00:06:04.631 --> 00:06:10.742
次に、通常のブロック配置に付けるだけでは効果が出ない点も押さえてください。

72
00:06:10.742 --> 00:06:14.871
さらに、値を二つ書くときの順番は、行、列の順です。

73
00:06:14.871 --> 00:06:19.991
横から先だと覚えてしまうと、意図と逆の間隔になってしまいます。

74
00:06:19.991 --> 00:06:24.780
順番と、間だけに効く性質、この二つをセットで覚えましょう。

75
00:06:24.780 --> 00:06:26.893
効かないときの確認手順です。

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

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

78
00:06:39.268 --> 00:06:48.323
スタイルズで宣言が無効になっていないか、ロウ・ギャップやカーラム・ギャップなど別の宣言に上書きされていないかも重要です。

79
00:06:48.323 --> 00:06:56.775
コンピューテッドでギャップの最終的な値を確認し、親の表示方式がグリッドやフレックスになっているかも調べましょう。

80
00:06:56.775 --> 00:07:01.906
グリッドの表示機能を使うと、トラックの間隔を目で追いやすくなります。

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

82
00:07:08.848 --> 00:07:10.855
最後に互換性とまとめです。

83
00:07:10.855 --> 00:07:15.949
ギャップは、記事ではクローム57以降、エッジ16以降、ファイアフォックス52以降、

84
00:07:15.949 --> 00:07:21.044
サファリ10.1以降などの記録が紹介されています。

85
00:07:21.044 --> 00:07:26.910
グリッドの文脈ではクローム66以降、フレックスの文脈ではクローム84以降、

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

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

88
00:07:41.731 --> 00:07:42.657
まとめます。

89
00:07:42.657 --> 00:07:47.288
ギャップは行と列の間隔をまとめる一括指定で、継承はしません。

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

91
00:07:53.463 --> 00:07:54.853
お疲れさまでした。

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

93
00:08:01.337 --> 00:08:06.740
広すぎず狭すぎない値を選ぶ感覚を、練習を通して身につけていきましょう。