SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのcolumn-gapの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:31動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、カーラム・ギャップです。
  4. 0:06これは列と列の間、つまり横方向に並んだ項目同士のすき間を決めるプロパティです。
  5. 0:11グリッド、フレックスボックス、そして文章を段に分ける段組みで利用できます。
  6. 0:16この動画では、1.5レムという広めの間隔と、0.25レムという狭い間隔を比べて、
  7. 0:20見た目がどう変わるかを確認します。
  8. 0:24カードを横に並べたとき、くっついて見えるか、ゆったり見えるかは、この値で大きく変わります。
  9. 0:30基本の書き方、指定できる値、実例、効かないときの確認まで、順番に見ていきましょう。
  10. 0:36写真の一覧や商品カードなど、横並びの配置は身近なページのあちこちで使われています。
  11. 0:42その並びの呼吸を整えるのが、このプロパティの役割です。
  12. 0:45まず基本の書き方です。
  13. 0:47セレクターのあとに、カーラム・ギャップ、コロン、値、セミコロンを書きます。
  14. 0:52スライドの例では、デモというクラスを持つ要素に1.5レムを指定しています。
  15. 0:58ここで大切なのは書く場所です。
  16. 1:00カーラム・ギャップは、並べられる子ではなく、並べ方を決める親のコンテナーに書きます。
  17. 1:06親がグリッドやフレックスとして項目を配置し、その列同士の間隔をこの一行で調整する、
  18. 1:11という役割分担を覚えてください。
  19. 1:15一つ前のフレックス・グロウが子に書くプロパティだった点と対比すると、違いがはっきりします。
  20. 1:21カーラム・ギャップが効く場面を整理します。
  21. 1:25第一はグリッドで、列トラックと列トラックの間のすき間になります。
  22. 1:30第二はフレックスボックスで、横並びの項目同士や、折り返したときの間隔に関わります。
  23. 1:36第三は段組みで、長い文章を新聞のように複数の段へ分けたとき、段と段の間隔を決めます。
  24. 1:42共通しているのは、横方向に複数の列が存在することです。
  25. 1:46列が一つしかなければ、列の間そのものが存在しないため、値を変えても見た目は変わりません。
  26. 1:53まず親の中に列がいくつあるかを確認する習慣をつけましょう。
  27. 1:57逆に言えば、列の数が分かるレイアウトを用意できれば、効果を目で確認しやすくなります。
  28. 2:04学習のときは三列程度のシンプルな例から始めると分かりやすいです。
  29. 2:09指定できる値を見ていきます。
  30. 2:11ノーマルは、間隔をレイアウト方式の標準に任せる指定です。
  31. 2:15実際の間隔は方式によって違い、グリッドやフレックスでは詰まった状態、段組みでは一定のすき間になることがあります。
  32. 2:24次に、1.5レムや16ピクセルのような長さで、間隔を直接指定する方法が最もよく使われます。
  33. 2:31さらに、パーセントで割合を指定することもでき、その場合はコンテナーの幅が基準になります。
  34. 2:38マイナスの長さは無効です。
  35. 2:40迷ったら、まずはレム単位の長さで指定し、広い、狭いを感覚でつかむのがおすすめです。
  36. 2:46初期値と継承を確認します。
  37. 2:48カーラム・ギャップの初期値はノーマルで、通常の継承はしません。
  38. 2:52親に書いた間隔が子へ自動で受け継がれることはないので、間隔がほしいコンテナーごとに指定します。
  39. 2:58一括指定ギャップとの関係も重要です。
  40. 3:01ギャップは、行の間隔ロウ・ギャップと、列の間隔カーラム・ギャップをまとめて書けるプロパティです。
  41. 3:07先にギャップで全体を指定し、あとからカーラム・ギャップだけを書けば、横の間隔だけを上書きできます。
  42. 3:14逆の順番で書くと、ギャップ側に上書きされるので、宣言の順番には注意してください。
  43. 3:19実例を見ていきます。
  44. 3:20まずエイチティーエムエルの用意です。
  45. 3:23ステージという外側の箱の中にデモがあり、その中に項目が六つ入っています。
  46. 3:29頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
  47. 3:34親と子の構造そのものが例の一部です。
  48. 3:37このあとデモを三列のグリッドにするので、六つの項目は三列、二行に並びます。
  49. 3:43列が三つあれば、列の間は二か所生まれます。
  50. 3:46その二か所のすき間が、カーラム・ギャップで一斉に広がったり狭まったりする様子に注目してください。
  51. 3:54次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  52. 3:59デモはディスプレイ、グリッドで三列に並び、土台としてギャップ、0.5レムが指定されています。
  53. 4:07そして主役は最後の行で、カーラム・ギャップに1.5レムを指定し、横の間隔だけを広げています。
  54. 4:15縦の行間は0.5レムのまま、横だけがゆったり広がるのがポイントです。
  55. 4:21項目は白い背景なので、列の間の緑色のすき間が広がったことが一目で分かります。
  56. 4:27土台の指定は共通なので、最後の一行だけに注目してください。
  57. 4:32なお、行と列で間隔を分けられるため、写真のように横を広く、縦を狭くといった細かな調整も、
  58. 4:37この組み合わせで実現できます。
  59. 4:42値を変えて比べてみましょう。
  60. 4:44最後のカーラム・ギャップの値だけを、1.5レムから0.25レムへ置き換えます。
  61. 4:50ファイルを保存してブラウザーを再読み込みすると、列と列の間隔がぐっと狭まり、
  62. 4:53項目同士が近づいて見えます。
  63. 4:57エイチティーエムエルは一切変えていませんし、行の間隔もそのままです。
  64. 5:02横のすき間だけが変わることが確認できます。
  65. 5:05間隔を狭めると項目の幅そのものに使える横幅も少し増えます。
  66. 5:09比較のコツは、いつも通り、変える値を一つだけにすることです。
  67. 5:13間違えやすい点を整理します。
  68. 5:15まず、カーラム・ギャップは項目の外側につけるマージンでも、内側の余白パディングでもありません。
  69. 5:22列と列の間だけに生まれる間隔で、端の外側には付きません。
  70. 5:26次に、列が一つしかないレイアウトでは、そもそも列の間が存在しないため、値を変えても見た目は変わりません。
  71. 5:34効いていないのではなく、働く場所がないだけです。
  72. 5:37さらに、ギャップの一括指定をあとに書くと、カーラム・ギャップが上書きされてしまいます。
  73. 5:43親がグリッドやフレックスになっていない場合も効かないので、親の表示方式を必ず確認しましょう。
  74. 5:50効かないときの確認手順です。
  75. 5:52まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
  76. 6:00次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
  77. 6:06スタイルズで宣言が無効になっていないか、ギャップなど別の宣言に上書きされていないかも重要です。
  78. 6:14コンピューテッドでカーラム・ギャップの最終的な値を確認し、親の表示方式がグリッドやフレックスになっているか、
  79. 6:20列がいくつあるかも調べましょう。
  80. 6:26最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容が利用できるかを確かめてください。
  81. 6:34最後に互換性とまとめです。
  82. 6:36カーラム・ギャップは段組みの用途では古くから使われ、記事ではクロームは1以降、
  83. 6:40サファリは3以降などの記録が紹介されています。
  84. 6:45グリッドではクローム66以降、フレックスではクローム84以降、サファリ14.1以降で対応がそろい、
  85. 6:51現在の主要ブラウザーでは安心して使えます。
  86. 6:56練習は、まず1.5レムと0.25レムの違いを自分の言葉で説明し、次に親の幅だけを変えて結果を比べることです。
  87. 7:04まとめます。
  88. 7:05カーラム・ギャップは列同士の横の間隔を決めるプロパティで、初期値はノーマル、
  89. 7:09継承はしません。
  90. 7:12関連するロウ・ギャップとギャップもあわせて確認すると理解が深まります。
  91. 7:18間隔は見た目の余白であると同時に、項目同士の区切りを示す大切な手がかりです。
  92. 7:23広すぎず狭すぎない値を選ぶ感覚も、練習を通して身につけていきましょう。
  93. 7:29お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

column-gapの役割と主な指定値を解説。Gridの列と列の間隔が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのcolumn-gapの使い方：指定値・実例・効かない原因とブラウザー互換性 →