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

column-spanプロパティ

 column-span プロパティは、column-count プロパティまたは columns によって分割されたエレメントにまたがって表示するかを指定するプロパティです。

 ヘッダーを全体幅で表示する場合などに用いることができます。

column-span プロパティによる全体幅表示
div.example_parent {
	column-count: 3;
}

div.example_parent h2{
	column-span: all;
}
詳しくは Example を参照してください

 設定値は、分割表示されるエレメントを全てまたぐか(all)、またがないか(none)です。

 column-span プロパティは、column-count または columns プロパティを設定した子エレメントに指定します。

関連プロパティ

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

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-width分割する内容の幅
columnsエレメントの分割数と幅の指定

構文(Syntax)

CSS

column-span: none | all | initial | inherit ;

DOM(JavaScript)

値の取得
String = object.style.columnSpan;
値の設定
object.style.columnSpan=" none | all | initial | inherit ";

値(Values)

Value摘要
none初期値(default値)
all全ての要素をまたぐ
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none
継承(Inherited)No
変化(Animatable)No

Example

 columns-spanの例です。エレメントの内容全体を column-count によって分割数で均等割されます。
 さらに、 column-count エレメントの子エレメントで columns-span を指定することで、子エレメントの内容は全体幅で表示されます。