column-width プロパティ
column-width プロパティは、エレメンの内容の表示幅を指定するプロパティです。指定した幅で列(横)方向に分割して表示します。収まる範囲で表示します。
カラムの最大分割数を指定する column-count プロパティがある場合は、 column-count プロパティが優先されます。
column-width: 150px;
カラムについての説明です。<table> の説明でもカラムという表現が出てくるので混合してしまいます。
columns プロパティは、column-count、column-width プロパティを一括して指定することができます。
カラムの内容の分割調整は column-fill プロパティ、カラムの結合は column-span プロパティ を使用します。
ページ内 Index
構文(Syntax)
CSS
column-width: auto | length | initial | inherit ;
DOM ( JavaScript )
String = object.style.columnWidth;
object.style.columnWidth=" auto | length | initial | inherit ";
値(Values)
Value | 摘要 |
---|---|
auto | 初期値(default値)、分割なし |
length | 数値で幅を設定 |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | auto |
継承(Inherited) | No |
変化(Animatable) | Yes |
Example
column-widthの例です。column-widthで指定された幅で、エレメントの内容を均等割して表示します。 左から順次表示されます。高さは、カラムの幅と分割数から決まります。
column-widthのみを指定すると分割数は自動で均等割されます。
関連プロパティ
以下のような関連するプロパティがあります。
プロパティ名 | 概要 |
---|---|
カラムに分割 | |
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 | カラム間に装飾する罫線の幅 |