【63】アイテム間の空きを指定する gap（row-gap, column-gap）
最終更新日：2022年09月23日 （初回投稿日：2021年11月20日）今回から Box Alignment Module にまとめられているCSSのボックスの配置のためのプロパティを見ていきましょう。 （Alignment（アラインメント）は「整列」などの意味）
CSSのボックスの配置は、マルチカラムとか、フレックスボックス、グリッドレイアウトなどで、ボックス（並べたいアイテムたち）をどのように並べるか決める仕様です。
アイテムたちを、まとめてスペースの真ん中に置きたいとか、下にそろえたいとか、スペースの中に均等な空きで置きたいとか、アイテム同士の空きを広くしたいとか狭くしたいとか、そんな指定のために使います。
ですので、これまでの記事（フレックスボックスやマルチカラム）でも登場しているプロパティもありますが、今回は整理のためにまとめたいと思います。
今回はまず、アイテム間の空きを指定する gapプロパティを使ってみよう。
gapプロパティは、
・row-gapプロパティ
・column-gapプロパティ
のショートハンドです。
column-gapプロパティは、マルチカラムでカラム間の空きを指定するのに使いました。
こちらです→【58】各カラムの間隔を指定する column-gapプロパティ
マルチカラムでは、row-gapプロパティは適用されないけど、gap（ショートハンド）は指定できます。
ただし Safari 14.0（iOS Safari 14.4）まではマルチカラムでのgapに未対応なので、マルチカラムでは column-gapプロパティだけで十分と【58】の記事に書きました。
column-gapプロパティがまた登場して【58】と重複しますが、今回の記事では、
・これと対になるrow-gapプロパティがあること
・それら2つのプロパティのショートハンドが gapプロパティであること、
・Grid Layout や Flexbox での使い方
をまとめておこうと思います。
ボックス配置は、下記のように記事を分けています。
- 【63】アイテム間の空きを指定する gap（row-gap, column-gap） ←今日はココ
- 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）
- 【64-2】ボックス配置の「整列キーワード」まとめ
- 【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）
- 【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）
- 【64-5】アイテムの配置・分布を指定するショートハンド place-content
- 【64-6】アイテム個別の配置を指定する justify-self (主軸方向)
- 【64-7】アイテム個別の配置を指定する align-self (交差軸方向)
- 【64-8】アイテム個別の配置を一括指定する place-selfショートハンド
- 【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)
- 【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)
- 【64-11】アイテム配置を一括指定する place-itemsショートハンド
参考：
・CSS Box Alignment Module Level 3 | W3C Working Draft
・CSS ボックス配置 | MDN
row-gap, column-gap, gapプロパティの値
まずは row-gapプロパティ と column-gapプロパティの値です。
row-gapは、row（行）方向のアイテム間の空き（行と行の空き）を、
column-gapは、カラム方向のアイテム間の空き（カラム同士の空き）を指定します。
| row-gapプロパティ column-gapプロパティ | |
|---|---|
| キーワード | normal がデフォルト値。 マルチカラムでは 1em。その他の場合は 0pxがデフォ値。 |
| <length> | 正の数値に単位（px, em, vw, rem など）を付けて指定（マイナスの値不可） |
| <percentage> | 要素の幅に対するパーセンテージ（%）で指定（マイナスの値不可） |
| calc() 関数 | <length> や <percentage>を演算子（ + - * / ）で計算した結果を値にできます |
| グローバル値 | inherit; 親値を継承 initial; 継承した親の値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作 |
| 値の継承 | しない | 適用できる要素 | マルチカラムのコンテナ（column-count, column-width, columnsを指定した要素）、 フレックスコンテナ、 グリッドコンテナ |
|---|
続いて、上記2つのショートハンドの gapプロパティの値です。
| gapショートハンドプロパティ | |
|---|---|
| CSS構文 | <'row-gap'> <'column-gap'>? |
| グローバル値 | inherit; 親値を継承 initial; 継承した親の値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作 |
| 値の継承 | しない | 適用できる要素 | マルチカラムのコンテナ（column-count, column-width, columns を指定した要素）、 フレックスコンテナ、 グリッドコンテナ |
|---|
ショートハンドの構文 <'row-gap'> <'column-gap'>? は、
row-gapプロパティ（半角スペース）column-gapプロパティ
という順番で書き、右側のcolumn-gapプロパティは省略可能ってことです。
2個書くなら順番は絶対 row-gap が最初で column-gap が2番目。
省略して値を1個だけにすると、両方ともその値になります。
/*値が2つ*/
gap: 10px 1em; /*row-gap: 10px; column-gap: 1em; と同じ*/
gap: calc(10% - 5px) 10%; /*row-gap: calc(10% - 5px); column-gap: 10%; と同じ*/
/*値が1つ*/
gap: 10px; /*row-gap: 10px; column-gap: 10px; と同じ*/
gap: 3vmin; /*row-gap: 3vmin; column-gap: 3vmin; と同じ*/
Grid Layout で gap を使ってみる
下記の HTML, CSS でサンプルを作っています。
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
.container{
border:1px solid#ccc;
padding:0;
margin:.5em 0;
display: grid;
grid-template-rows: 130px 130px;
grid-template-columns: repeat(3, 1fr);
grid-gap: 2em 5px; /*for old*/
gap: 2em 5px;
}
.container div{padding:1em;text-align:center}
.container div:nth-child(1) {background:#fcf}
.container div:nth-child(2) {background:#ffc}
.container div:nth-child(3) {background:#cfc}
.container div:nth-child(4) {background:#eee}
.container div:nth-child(5) {background:#cff}
.container div:nth-child(6) {background:#ffebcd}
プレビューはこちら。
グリッドレイアウト については下記をご覧ください。
【62-1】Grid Layout の grid-template-rows, grid-template-columns
Flexbox で gap を使ってみる
Flexbox での CSS はこちら。HTMLはさっきと変わってません。
.container{
display:flex;
flex-wrap:wrap;
gap: 2em 5px;
}
.container div {
flex-basis:25%;
flex-grow:1;
height:100px;
}
プレビューはこちら。
古めのブラウザでは見れないかも。
下は Firefox（on Mac）でのプレビュー画像です。
Flexbox については下記をご覧ください。
【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）
Multi-column で column-gap を使う
マルチカラムでの gap は、IE10, 11〜Edge15まで・ Safari（iOS Safari含む）は未実装です。
それに加えてW3C仕様書では マルチカラムには「row-gap は現時点では適用されない」（row-gap does not currently apply. ）となっています（2021年11月記）
ですので「マルチカラムでは column-gap だけ使う」と覚えたほうが無難かな。
（そもそもマルチカラムはカラムを設定するものなので、行方向のブロックは作らないから、行方向のブロック同士の空きを指定する row-gap は矛盾するんよね）
マルチカラムでの column-gap のデフォルト値は「1em」。（他はデフォルト値「0」）
特に指定しなくても、カラム間の空きは自動的に「1em」作られます。それより大きくしたい・小さくしたいときに、このプロパティを使うかんじです。
サンプルです。
column-gap: 2em でカラム同士の間隔を2emにしたサンプルです。
マルチカラムでの column-gap のデフォルト値は「1em」になっています。それより大きくしたい・小さくしたいときに column-gap を使います。
このサンプルは、カラム間の罫線（column-rule）も指定しています。column-rule の線幅は column-gap に影響しません。
サンプルの HTML, CSS はこちら。
<div class="container">
<p>
column-gap: 2em でカラム同士の間隔を2emにしたサンプルです。（以下略）
</p>
</div>
.container {
column-count: 2;
column-gap: 2em;
column-rule: dotted #aacf53;
text-align: justify;
margin: 1em 0;
border: solid 1px #ccc;
padding: 1em;
}
.container p {
line-height: 1.4em;
margin: 0;
}
マルチカラム での column-gapプロパティについては、下記をご覧ください。
【58】各カラムの間隔を指定する column-gapプロパティ
row-gap, column-gap, gapの変遷とブラウザの対応
row-gap、column-gap、gapは いろいろあって途中で名前が変っています。
なのでグリッドレイアウトで使うときは「昔の名前」でしか反応しない古めのブラウザもあるので、その理由というか背景を書いておきますね。
昔の名前（grid- がついたやつ）でも使えます
マルチカラム用には元々 column-gap があって「Multi-column Layout Module」に入っていました。（一番古い1999年の仕様書にもすでにcolumn-gapが記載あり）
（column-gapは 元々マルチカラム用だったので、けっこう古いブラウザでもマルチカラムになら実装されている、というわけです）
それとは別にグリッドレイアウト用のプロパティで、grid-row-gap、grid-column-gap、grid-gap というのがあって「Grid Layout Module」に入っていました。
（2015年の仕様書で、まだ grid-gap が仕様として載ってます。グリッドレイアウトの仕様書は2011年から存在します）
似たような名前で用途も似たプロパティなので、整理するために、それぞれのモジュールから出して、「Box Alignment Module」に移されました。
（2017年9月から移ったみたい。Box Alignment Module 自体は2012年から存在します）
それで、もうグリッドレイアウト専用じゃないから頭の「grid-」を取って、今の名前 row-gap、column-gap、gap という名前に統一されたそうです。
ただ、Grid Layoutでは昔の名前しか対応してない古めのブラウザもあるので、昔の名前（grid- がついたやつ）も使えることになっています。（使ってもエラーにならない）
row-gap、column-gap、gap のブラウザ実装状況
そんなわけで、row-gap、column-gap、gapは、Grid Layout、Flexbox、マルチカラム によって、ブラウザの実装状況が異なります。
ブラウザの実装状況を表にしてみました。
参考：Can I use（2021年11月）
| Grid Layout での実装状況 | |
|---|---|
| row-gap | ・IE10, 11〜Edge15まで未実装（Edge16から実装） ・Safari 11（iOS Safari含む）までは、grid-row-gap で対応。12以降は対応 ・その他は実装 |
column-gap | ・IE10, 11〜Edge15まで未実装（Edge16から実装） ・Safari 11（iOS Safari含む）までは、grid-column-gap で対応。12以降は対応 ・その他は実装 |
| gap | ・IE10, 11〜Edge15まで未実装（Edge16から実装） ・Safari 11（iOS Safari含む）までは、grid-gap で対応。12以降は実装 ・その他は実装 |
＊Grid Layout での gap関連は IE10, 11〜Edge15までは仕様が違うので使えません。
トラックサイズを決めるときに gap分も組み込む手があります。
詳細は、（ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う をご覧ください。
| Flexbox での実装状況 | |
|---|---|
| row-gap | ・IE〜Edge83まで未実装（Edge84から実装） ・Safari 14まで未実装（14.1から実装） ・iOS Safari 14.4まで未実装（14.8から実装） ・その他は実装 |
column-gap |
| gap | |
| Multi-column での実装状況 | |
|---|---|
| row-gap | マルチカラムで row-gap は使えない仕様 （仕様書に「現在は適用されない（row-gap does not currently apply）」とあります） |
column-gap | ・すべてのブラウザで実装 |
| gap | ・IE10, 11〜Edge15まで未実装（Edge16から実装） ・Safari（iOS Safari含む）は未実装 ・その他は実装 |
次回予告
次回から Box Alignment Module の中の、アイテムを分布・配置するためのプロパティ達を見ていきましょう。
ざっとこんなかんじのプロパティがあるんですが...
・justify-content
・align-content
・justify-self
・align-self
・justify-items
・align-items
最初に頭の中を整理しといたほうが良いルール（文字の流れの方向だと「justify-」その直角の方向なら「align-」が付くとか）がありますので、次回はそんな全体像をまとめてみます。
- 関連記事
-
- 【64-7】アイテム個別の配置を指定する align-self (交差軸方向)
- 【64-6】アイテム個別の配置を指定する justify-self (主軸方向)
- 【64-5】アイテムの配置・分布を指定するショートハンド place-content
- 【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）
- 【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）
- 【64-2】ボックス配置の「整列キーワード」まとめ
- 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）
- 【63】アイテム間の空きを指定する gap（row-gap, column-gap）
- （ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う
- 【62-9】Grid Layout での order, position-absolute, z-index, margin
- 【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる
- 【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns
- 【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ
- 【62-5】アイテム側の位置指定を一括する grid-areaショートハンド
- 【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
