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

column-width プロパティ

 column-width プロパティは、カラムの分割においてカラムの表示幅を指定するプロパティです。指定した幅で列(横)方向に収まる範囲で分割して表示します。

 カラムの最大分割数を指定する column-count プロパティがある場合は、 column-count プロパティが優先されます。

エレメントを幅150pxで分割して表示(Exampleの参照
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のみを指定すると分割数は自動で均等割されます。