CSS3でマルチカラムの間隔を指定する

マルチカラムの間隔を調節する方法をみつけました。 Ardor(@ArdorOnline)です。 マルチカラムが簡単にできるようになったのはいいですが、間隔などマージンのやり方がわからずにいました。 間隔を指定するプロパティが見つかったので、ご紹介します。

マルチカラムの間隔

マルチカラムの間隔を指定するプロパティは、column-gapを利用します。 指定は、数値とnormalがあります。normalを指定した場合は、1文字分程度の間隔になります。

プロパティ	値	サンプル
column-gap	段幅 / normal	column-gap : 50px
-moz-column-gap	段幅 / normal	-moz-column-gap : 50px
-webkit-column-gap	段幅 / normal	-webkit-column-gap : 50px

スタイルの記述

スタイルの記述は次の通りです。
マルチカラム指定は、column-countやcolumn-widthを利用します。

 width: 600px;
 margin: auto;
 column-count: 2;
 -moz-column-count: 2;
 -webkit-column-count: 2;
 column-gap: 50px;
 -moz-column-gap: 50px;
 -webkit-column-gap: 50px;

今回は、マルチカラムの間隔に50pxを指定しました。

サンプル

上記にあるスタイルを指定してない場合と指定した場合を作成しました。

マルチカラムレイアウト

間隔を指定していない場合。
このブロックはcolumn-countプロパティで2段になるように指定されています。

段組みレイアウトサンプル

このブロックはcolumn-countプロパティで2段になるように指定されています。

マルチカラムレイアウト

間隔を指定した場合。
このブロックはcolumn-countプロパティで2段になるように指定されています。

段組みレイアウトサンプル

このブロックはcolumn-countプロパティで2段になるように指定されています。

最後に

CSS3でマルチカラムを組んだ場合に間隔も指定できるようになりました。
主力ブラウザでも問題なく表示されているので、使えそうです。

最後までお読み頂きありがとうございます。