SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

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

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