columns プロパティ
columns プロパティは、エレメントの内容をカラムに分割して表示する CSS のプロパティです。column-width、column-count プロパティを一括して指定できます。
column-width がカラムごとの幅で、column-count が分割数です。
幅の値は CSS の長さで絶対長でなければならないようです。分割数は正の整数またはキーワードで指定します。
ここでのカラムとは、新聞記事のような縦割りのレイアウトに表示することができるスタイルです。例えば以下のような表示です。
columns: 150px auto;
カラムについての説明です。<table> の説明でもカラムという表現が出てくるので混合してしまいます。
エレメントの内容は左から順次表示されます。高さは指定がなければ自動で設定されます。
column-width と column-count では、 column-count が優先されます。詳しくは
を参照してください。カラムに分割
について
カラムに分割
において、column-fill と column-span プロパティによって分割の調整ができます。
また、カラムとカラムの間のギャップの調整や罫線の表示が column-gap や column-rule で出来ます。
詳しくは分割の調整
とカラム間のギャップと罫線
を参照してください。
ページ内 Index
カラムに分割
について
columns プロパティによってカラムに分割
できるのですが、column-width プロパティとcolumn-count プロパティには優先順位があります。
さらに分割表示されるカラムはいろいろと調整することができます。カラム幅の調整や子エレメントの扱い、カラム間のギャップの指定と罫線の表示を行うことができます。
column-width と column-count について
column-count プロパティは最大表示数の指定で、column-width プロパティによる幅よりcolumn-count プロパティによる分割数の方が優先されます。
column-width の幅で割った数より column-count プロパティによる指定の分割数が少ない場合は、column-count プロパティの指定が優先されて幅が調整されます。
例えば以下は、幅を 10px と指定して２分割より大きくなるようにし、分割数を 2 で指定しています。
columns: 10px 2;
カラムについての説明です。<table> の説明でもカラムという表現が出てくるので混合してしまいます。
この例から分割数の方が優先されていることが分かります。
分割の調整
分割における幅の調整には、column-fill プロパティを使用します。
カラムに分割されるエレメントの子エレメントは、column-span プロパティによって、分割されないようにすることができます。column-span: all; によって子エレメントはカラムにまたがって表示することができます。
column-span プロパティは子エレメントに指定します。
columns: 150px auto; column-fill: auto; /* column-span は子エレメントに指定します */
カラムによる分割表示（このエレメントはカラムにまたがって表示されます）
カラムについての説明です。<table> の説明でもカラムという表現が出てくるので混合してしまいます。
column-fill プロパティの値は none、all のみが指定できます。all に指定すると、高さが固定されない限りは内容が分割されているようには見えません。
カラム間のギャップと罫線
カラム間のギャップの調整は column-gap プロパティで指定します。
カラム間には column-rule によって罫線を表示することができ、罫線の線種（ column-rule-style ）、色（ column-rule-color ）、太さ（ column-rule-width ）を別々に指定することができます。
columns: 150px auto; column-gap: 2em; column-rule: dotted red 5px;
カラムについての説明です。<table> の説明でもカラムという表現が出てくるので混合してしまいます。
構文(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 Animation | Yes |
Example
columnsの例です。エレメントの内容全体を分割数で均等割され、左から順次表示されます。高さは、カラムの幅と分割数から決まります。
分割幅が指定されている場合は分割数はautoになるようです。
関連プロパティ
以下のような関連するプロパティがあります。
| プロパティ名 | 概要 |
|---|---|
| カラムに分割 | |
| columns | エレメントの分割数と幅の指定 |
| column-count | 分割数 |
| column-width | 分割する内容の幅 |
| 分割の調整 | |
| column-fill | 均等に割るか |
| column-span | 分割されたエレメントにまたがって表示 |
| カラム間のギャップと罫線 | |
| column-gap | 分割した内容の間 |
| column-rule | column-rule-width、column-rule-style、column-rule-colorプロパティの一括指定 |
| column-rule-color | カラム間に装飾する罫線の色 |
| column-rule-style | カラム間に装飾する罫線の種類 |
| column-rule-width | カラム間に装飾する罫線の幅 |