2016年07月08日
CSS3のプロパティについて解説する連載です。今回はカラムの幅と数が指定できるcolumnsプロパティについて解説します。
columnsを指定する方法です。
columns: カラムの幅 カラムの数
「カラムの幅」と「カラムの数」を、それぞれ数値で指定します。
カラムの幅 | カラム幅のを数値で指定します。指定した数値を最低値として、それを超えるカラム幅になります。デフォルトはautoです。 |
---|---|
カラムの数 | カラムの数を数値で指定します。デフォルトはautoです。 |
要は、カラムの幅を指定するcolumn-widthと、カラムの数を指定するcolumn-countを組み合わせたプロパティが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もあるので、上手に活用していきましょう。
「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。