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

最終更新日:2020年11月12日  (初回投稿日:2020年06月13日)

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-gaprow-gap が必要。
でもマルチカラムの世界は 1方向。ボックス内のテキストをカラムに分けるだけだから。書字方向(columnの方向)しかありません。
マルチカラムでは縦書きモードでもカラム間の間隔は column-gapで指定します。
というわけで column-gapのみ。row-gap は不要なんでしょうね。

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

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

ただしマルチカラムでは 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プロパティを使ってみましょう。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.