WEBVTT

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

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

3
00:00:03.319 --> 00:00:06.084
今回のテーマは、カーラム・ギャップです。

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

5
00:00:11.478 --> 00:00:16.594
グリッド、フレックスボックス、そして文章を段に分ける段組みで利用できます。

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

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

8
00:00:24.476 --> 00:00:30.699
カードを横に並べたとき、くっついて見えるか、ゆったり見えるかは、この値で大きく変わります。

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

10
00:00:36.369 --> 00:00:42.038
写真の一覧や商品カードなど、横並びの配置は身近なページのあちこちで使われています。

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

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

13
00:00:47.405 --> 00:00:52.897
セレクターのあとに、カーラム・ギャップ、コロン、値、セミコロンを書きます。

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

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

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

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

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

19
00:01:15.312 --> 00:01:21.992
一つ前のフレックス・グロウが子に書くプロパティだった点と対比すると、違いがはっきりします。

20
00:01:21.992 --> 00:01:25.185
カーラム・ギャップが効く場面を整理します。

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

22
00:01:30.051 --> 00:01:36.286
第二はフレックスボックスで、横並びの項目同士や、折り返したときの間隔に関わります。

23
00:01:36.286 --> 00:01:42.673
第三は段組みで、長い文章を新聞のように複数の段へ分けたとき、段と段の間隔を決めます。

24
00:01:42.673 --> 00:01:46.779
共通しているのは、横方向に複数の列が存在することです。

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

26
00:01:53.469 --> 00:01:57.879
まず親の中に列がいくつあるかを確認する習慣をつけましょう。

27
00:01:57.879 --> 00:02:04.266
逆に言えば、列の数が分かるレイアウトを用意できれば、効果を目で確認しやすくなります。

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

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

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

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

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

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

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

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

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

37
00:02:48.448 --> 00:02:52.567
カーラム・ギャップの初期値はノーマルで、通常の継承はしません。

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

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

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

41
00:03:07.584 --> 00:03:14.096
先にギャップで全体を指定し、あとからカーラム・ギャップだけを書けば、横の間隔だけを上書きできます。

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

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

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

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

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

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

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

49
00:03:43.547 --> 00:03:46.860
列が三つあれば、列の間は二か所生まれます。

50
00:03:46.860 --> 00:03:54.432
その二か所のすき間が、カーラム・ギャップで一斉に広がったり狭まったりする様子に注目してください。

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

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

53
00:04:07.572 --> 00:04:15.421
そして主役は最後の行で、カーラム・ギャップに1.5レムを指定し、横の間隔だけを広げています。

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

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

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

57
00:04:32.656 --> 00:04:37.690
なお、行と列で間隔を分けられるため、写真のように横を広く、縦を狭くといった細かな調整も、

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

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

60
00:04:44.707 --> 00:04:50.229
最後のカーラム・ギャップの値だけを、1.5レムから0.25レムへ置き換えます。

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

62
00:04:53.911 --> 00:04:57.593
項目同士が近づいて見えます。

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

64
00:05:02.407 --> 00:05:05.381
横のすき間だけが変わることが確認できます。

65
00:05:05.381 --> 00:05:09.488
間隔を狭めると項目の幅そのものに使える横幅も少し増えます。

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

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

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

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

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

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

72
00:05:37.467 --> 00:05:43.652
さらに、ギャップの一括指定をあとに書くと、カーラム・ギャップが上書きされてしまいます。

73
00:05:43.652 --> 00:05:50.268
親がグリッドやフレックスになっていない場合も効かないので、親の表示方式を必ず確認しましょう。

74
00:05:50.268 --> 00:05:52.637
効かないときの確認手順です。

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

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

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

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

79
00:06:20.389 --> 00:06:26.312
列がいくつあるかも調べましょう。

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

81
00:06:34.096 --> 00:06:36.098
最後に互換性とまとめです。

82
00:06:36.098 --> 00:06:40.872
カーラム・ギャップは段組みの用途では古くから使われ、記事ではクロームは1以降、

83
00:06:40.872 --> 00:06:45.645
サファリは3以降などの記録が紹介されています。

84
00:06:45.645 --> 00:06:51.035
グリッドではクローム66以降、フレックスではクローム84以降、サファリ14.1以降で対応がそろい、

85
00:06:51.035 --> 00:06:56.424
現在の主要ブラウザーでは安心して使えます。

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

87
00:07:04.740 --> 00:07:05.664
まとめます。

88
00:07:05.664 --> 00:07:09.206
カーラム・ギャップは列同士の横の間隔を決めるプロパティで、初期値はノーマル、

89
00:07:09.206 --> 00:07:12.747
継承はしません。

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

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

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

93
00:07:29.378 --> 00:07:30.764
お疲れさまでした。