column-span プロパティ
column-span プロパティは、columns または column-width プロパティ、 column-count プロパティによって分割されたエレメントを結合して表示するための CSS プロパティです。
このプロパティは子エレメントに指定します。
分割されたカラムを結合することで、ヘッダーなどを全体幅で表示する場合などに用いることができます。
div.example_parent {
columns:150px auto;
}
div.example_parent h4{
column-span: all;
}
カラムによる分割表示（このエレメントはカラムにまたがって表示されます）
カラムについての説明です。<table> の説明でもカラムという表現が出てくるので混合してしまいます。
設定値は、分割表示されるエレメントを全て結合するか（all）、結合しないか（none）です。
column-span プロパティは、column-count または columns プロパティを設定した子エレメントに指定します。
ページ内 Index
- ad -
構文(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 を指定することで、子エレメントの内容は全体幅で表示されます。
- ad -
関連プロパティ
以下のような関連するプロパティがあります。
| プロパティ名 | 概要 |
|---|---|
| カラムに分割 | |
| 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 | カラム間に装飾する罫線の幅 |