備忘録的プログラミングリファレンス

columnsプロパティ

 columnsプロパティは、エレメントの内容を分割して表示するプロパティで、column-widthcolumn-countプロパティを一括して指定できます。
 エレメントの内容全体を分割数で均等割され、左から順次表示されます。高さは、エレメントの内容全体を分割数で割ったサイズになります。

エレメントを幅250pxで3分割して表示(Exampleの参照
columns: 250px 3;

 幅の値は絶対長でなければならないようです。

 このプロパティは、column-countプロパティのように分割数のみを指定するものでなく、column-widthの幅で表示できる分しか表示しません。 column-countは最大表示数の指定で、これより多くは表示されません。

関連プロパティ

 以下のような関連するプロパティがあります。

column-count分割数
column-fill均等に割るか
column-gap分割した内容の間
column-rulecolumn-rule-width、column-rule-style、column-rule-colorプロパティの一括指定
column-rule-colorカラム間に装飾する罫線の色
column-rule-styleカラム間に装飾する罫線の種類
column-rule-widthカラム間に装飾する罫線の幅
column-span分割されたエレメントにまたがって表示
column-width分割する内容の幅

構文(Syntax)

CSS

columns: auto auto | column-width column-count | initial | inherit ;

DOM(JavaScript)

値の取得
String = object.style.columns;
値の設定
object.style.columns=" auto auto | column-width column-count | initial | inherit ";

値(Values)

Value摘要
auto auto初期値(default値)
column-width分割表示する際の幅
column-count分割表示の最大数
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)auto auto
継承(Inherited)No
CSS AnimationYes

Example

 columnsの例です。エレメントの内容全体を分割数で均等割され、左から順次表示されます。高さは、カラムの幅と分割数から決まります。

 分割幅が指定されている場合は分割数はautoになるようです。