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もあるので、上手に活用していきましょう。