SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

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

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