CSSリファレンス
実践向けCSSリファレンス

カラムの間隔を設定する

CSS - column-gap

概要

CSSプロパティ「column-gap」は、columns プロパティなどで指定された要素のカラムの間隔を指定する際に使用します。

<p>column-gap: 10%;を指定</p>
<div class="multicolumnbox column-gap">
 <div>左カラムです。左カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
 <div>右カラムです。右カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
</div>
<style>
.multicolumnbox div {
  font-size: 12px;
  border: 1px solid #000;
  background-color: #def;
}
.multicolumnbox {
  columns: 2 100px;
}
.column-gap {
  column-gap: 10%;
}
</style>

値の指定方法

マイナス値以外を指定します。もし、column-rule プロパティでカラムの間に区切り線が指定されている場合は、区切り線の左右に等分されます。

{column-gap: <間隔値>}
説明
数値 px、em、%など。マイナス値は指定できません。
単位説明
pxpxとは画面の1画素(ピクセル)のサイズを1とする単位です。実際に表示されるサイズはモニターの解像度により変化します。
em親要素を起点とする文字の高さを1とする単位です。1emは1文字分となります。
%親要素の幅を基準に割合を%値で指定した単位です。
<p>column-gap: 10px;を指定</p>
<div class="multicolumnbox column-gap">
 <div>左カラムです。左カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
 <div>右カラムです。右カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
</div>
<p>column-gap: 30px;を指定</p>
<div class="multicolumnbox column-gap-30">
 <div>左カラムです。左カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
 <div>右カラムです。右カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
</div>
<style>
.multicolumnbox div {
  font-size: 12px;
  border: 1px solid #000;
  background-color: #def;
}
.multicolumnbox {
  columns: 2 100px;
}
.column-gap {
  column-gap: 10px;
}
.column-gap-30 {
  column-gap: 30px;
}
</style>

プロパティの種類について

ショートハンドプロパティや、個別指定できるプロパティなど、columnプロパティをまとめた概要一覧です。詳細はそれぞれのページを参照してみてください。

プロパティ名説明
columns「column-count」と「column-width」を指定できるショートハンドプロパティ
column-countカラム数を指定する
column-widthカラムの幅と指定する
column-rule「column-rule-color」と「column-rule-style」と「column-rule-width」をまとめて指定するショートハンドプロパティ
column-rule-colorカラム間の区切り線の色を指定する
column-rule-styleカラム間の区切り線のスタイルを指定する
column-rule-widthカラム間の区切り線の幅を指定する
column-gapカラム同士の間隔を指定する
column-fillカラム同士の高さをそろえるかどうかを指定する
column-span複数のカラムにまたがる要素に指定する

使用例

このプロパティを使うことで、マルチカラムレイアウトを実装することができます。今までは、一つ一つ組み上げていたものが簡単にできるようになります。

<div class="header">ヘッダー</div>
<div class="multicolumnbox">
 <div>左カラムです。左カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
 <div>真ん中のカラムです。真ん中カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
 <div>右カラムです。右カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
</div>
<div class="footer">フッター</div>
<style>
.header,
.footer {
  margin: 0px 10px;
  border: 1px solid #000;
}
.multicolumnbox div {
  border: 1px solid #000;
  background-color: #def;
}
.multicolumnbox {
  padding: 10px;
  columns: 3 100px;
}
</style>

仕様書

関連CSSプロパティ

閉じる