CSS3のcolumnsプロパティを使って段組を指定する方法

Web制作

2016年07月08日

CSS3プロパティの連載記事

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

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。