【58】各カラムの間隔を指定する column-gapプロパティ

column-gapプロパティは、カラム同士の間隔を指定することができます。

column-gapプロパティは、マルチカラムだけでなく、フレックスボックス、グリッドレイアウトでも使うことができます。
（なのでW3Cではマルチカラムとは別の Box Alignment Module Level 3 に記載されています）

今回はマルチカラムでの column-gapプロパティの使い方を見てみましょう。

本日のINDEX

1. column-gapプロパティの値
2. マルチカラムでは column-gapしか使わない？
3. column-gapプロパティをマルチカラムで使ってみる

マルチカラム関連のプロパティは、下記のように記事を分けます。

【57-1】マルチカラムのカラム数を決める column-countプロパティ

【57-2】マルチカラムのカラム幅を決める column-widthプロパティ

【57-3】カラム数と幅をまとめて指定する columnsショートハンド

【58】各カラムの間隔を指定する column-gapプロパティ　←今日はココ

【59-1】カラム間の罫線のスタイルを指定する column-rule-style

【59-2】カラム間の罫線の幅を指定する column-rule-width

【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ

【59-4】カラム間の罫線をまとめて指定する column-rule

【60】マルチカラム内で段抜きができる column-spanプロパティ

【61】各カラムの埋め方を決める column-fillプロパティ

（ちょっとメモ）ブラウザはどうやって カラムの幅を決めるか

参考：
・CSS Multi-column Layout Module Level 1 | W3C Working Draft
・CSS 段組みレイアウト | MDN
・CSS Box Alignment Module Level 3 | W3C Working Draft

column-gapプロパティの値

column-gapプロパティの値は以下のものがあります。

column-gapプロパティ
キーワード	normal がデフォルト値。 マルチカラムでは 1em。（マルチカラム以外では 0px がデフォ値です）
<length>	正の数値に単位（px, em, vw, rem など）を付けて指定（マイナスの値不可）
<percentage>	要素の幅に対するパーセンテージ（%）で指定（マイナスの値不可）
グローバル値	column-gap: inherit; 親値を継承 column-gap: initial; 継承した親の値を解消しデフォルト値に戻す column-gap: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	マルチカラムのコンテナ（column-count, column-width, columns を指定した要素）、 フレックスコンテナ（display: flex を指定した要素）、 グリッドコンテナ（display: grid を指定した要素）

マルチカラムでは column-gapしか使わない？

ちょっと余談になりますが、マルチカラムでcolumn-gapプロパティだけ紹介する理由についてお話します。

アイテム同士の間隔を決めるプロパティは、column-gapの他に row-gapというのもあるんです。

column（カラム）とは「カラム（段）」のこと。row（ロウ） とは「行」のこと。
column-gapはカラム方向（書字方向。横書きなら横方向）に並ぶアイテム同士の間隔を指定。
row-gapは行方向（書字方向と垂直の方向）に並ぶアイテム同士の間隔を指定するプロパティです。

ですが、W3C仕様書で「マルチカラムでは、row-gapプロパティは現時点では適用されない」（row-gap does not currently apply. ）とされてます。（2020年6月記）

フレックスボックス、グリッドレイアウトは2方向っていうか、アイテムが横にも縦にも並ぶので、アイテムの間隔も2方向。だから column-gap と row-gap が必要。
でもマルチカラムの世界は 1方向。ボックス内のテキストをカラムに分けるだけだから。書字方向（columnの方向）しかありません。
マルチカラムでは縦書きモードでもカラム間の間隔は column-gapで指定します。
というわけで column-gapのみ。row-gap は不要なんでしょうね。

さらに話を進めて、
column-gap と row-gap の値を一括指定するショートハンドの gapプロパティってのもあるんです。

gapも マルチカラム、フレックスボックス、グリッドレイアウトで使えます。
「gap: 20px 10px」といった具合で値を2つ書くと、最初が row-gap、2番目が column-gap と順番が決まっています。そして値が１つなら、両方同じ値です。

ただしマルチカラムでは row-gap が無いので、gap で値を1コ指定すれば column-gap のみを指定したことになります。

しかし残念ながらマルチカラムでの gapは、未対応のブラウザがけっこうあります。
・IE10, 11 〜Edge15までは未対応。
・Safari（iOS Safariを含む）も未対応です。

上記のブラウザは、マルチカラムでは column-gap なら実装しています。

gapで書くと（column-gapって書くよりも）文字数が少なくて記述が簡単だけど、gapで書いても 未実装ブラウザのために結局 column-gap も併記しなきゃなりません。
だったら column-gap だけでいいじゃん。

というわけで、マルチカラムでのカラム間隔は column-gap だけでOKということです。

初っ端から ややこしい話をしましたが、途中は読み流して、最後のマルチカラムでのカラム間隔は column-gap だけ覚えといてください。
column-gap、row-gap、gapショートハンドについては、近いうちに別記事でまとめます。

column-gapプロパティをマルチカラムで使ってみる

ではマルチカラムで column-gapプロパティを使ってみよう。
column-gap: 2em としたサンプルです。

column-count: 2; で各カラム数を2個にし、column-gap: 2em でカラム同士の間隔を2emにしたサンプルです。
column-gapのデフォルト値は auto で、マルチカラムでは「1em」なので、その倍の間隔に指定したことになります。

HTMLはこちら。

<div class="sample1">
<p>
column-count: 2; で各カラム数を2個にし、column-gap: 2em でカラム同士の間隔を2emにしたサンプルです。<br>
column-gapのデフォルト値は auto で、マルチカラムでは「1em」なので、その倍の間隔に指定したことになります。</p>
</div>

CSSはこちら。

.sample1 {
	margin:2em 0;
	border:solid 1px #ccc;
	padding:1em;
	column-gap:2em;
	-webkit-column-count:2;  /* ←古いブラウザ用。無くてもいいです*/
	column-count:2}
.sample p {
	text-indent:1em;
	line-height:1.4em;
	margin:0}

「％」も使ってみます。column-gap: 10% としてみたサンプルです。
ちょっと空きすぎちゃった。5％くらいが良さそう。

column-width: 15em; で各カラム幅を15emにし、column-gap: 10% でカラム同士の間隔を 5%にしたサンプル。
パーセンテージはマルチカラム コンテナの Content Box に対してのものになります。

CSSはこちら。（HTMLは先程のサンプルと同じです）

.sample2 {
	margin:2em 0;
	border:solid 1px #ccc;
	padding:1em;
	column-gap:10%;
	column-width:15em}
.sample2 p {
	text-indent:1em;
	line-height:1.4em;
	margin:0}

次回予告

マルチカラムでは、各カラムの間に「罫線」を入れることもできます。すごいよね。
この罫線は、点線や二重線などの「スタイル」や、「線幅」「色」を指定することができます。
次回は、カラムの罫線の「スタイル」を指定する column-rule-styleプロパティを使ってみましょう。