制作会社様とのやり取りに特化したコーディング代行ならくまWebにお任せください！

CSS3のプロパティについて解説する連載です。今回はカラムの幅と数が指定できるcolumnsプロパティについて解説します。

columnsの指定方法

columnsを指定する方法です。

columns: カラムの幅 カラムの数

「カラムの幅」と「カラムの数」を、それぞれ数値で指定します。

カラムの幅	カラム幅のを数値で指定します。指定した数値を最低値として、それを超えるカラム幅になります。デフォルトはautoです。
カラムの数	カラムの数を数値で指定します。デフォルトはautoです。

要は、カラムの幅を指定するcolumn-widthと、カラムの数を指定するcolumn-countを組み合わせたプロパティがcolumnsということですね。

columnsの具体例

columnsを使った具体例について見ていきましょう。以下の例では、div（widthは300px）にculumnsを指定してスタイルを比較していきます。

※下記の例では、ベンダープレフィックスも記述しています。

カラムの幅のみ指定

「カラムの幅」のみ指定した場合です。

div {
  -moz-columns: 100px auto;
  -webkit-columns: 100px auto;
  -o-columns: 100px auto;
  -ms-columns: 100px auto;
  columns: 100px auto;
}

columnsでカラム幅を100px、widthでdivの幅を300pxに指定しています。マージンがあるので、ピッタリ3カラムとはいかず、2カラムで表示されています。

カラムの数のみ指定

「カラムの数」のみ指定した場合です。

div {
  -moz-columns: auto 3;
  -webkit-columns: auto 3;
  -o-columns: auto 3;
  -ms-columns: auto 3;
  columns: auto 3;
}

カラムの幅はauto、カラムの数は3つとして指定しています。divの範囲に収まるよう、カラムの数が3つで表示されています。

カラムの幅と数を両方指定

「カラムの幅」と「カラムの数」を両方とも指定した場合です。

div {
  -moz-columns: 100px 3;
  -webkit-columns: 100px 3;
  -o-columns: 100px 3;
  -ms-columns: 100px 3;
  columns: 100px 3;
}

カラムの幅は100px、カラムの数は3つとして指定しています。この場合は、指定した値に合うよう最適なレイアウトで表示されます。3カラムにするとカラム幅が100pxを下まわってしまうので、2カラムで表示されています。

あとがき

columnsプロパティの使い方について解説しました。カラム間の余白を調整するcolumn-gapや、罫線を指定するcolumn-ruleもあるので、上手に活用していきましょう。