column-span
column-span
は CSS のプロパティで、値に all
を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
/* キーワード値 */
column-span: none;
column-span: all;
/* グローバル値 */
column-span: inherit;
column-span: initial;
column-span: unset;
複数の段にまたがる要素は、スパニング要素と呼びます。
構文
column-span
プロパティは以下に挙げたキーワード値のうちの一つで指定します。
値
none
- この要素は複数の段にまたがりません。
all
- この要素がすべての段にまたがります。この要素よりも前に現れた通常フローのコンテンツは、自動的にすべての段で均等になります。この要素は新しいブロック整形コンテキストを生成します。
公式定義
形式文法
none | all
例
段をまたぐ見出しの設定
この例では、見出しが記事のすべての段にまたがって作成されます。
HTML
<article>
<h2>Header spanning all of the columns</h2>
<p>
The h2 should span all the columns. The rest
of the text should be distributed among the columns.
</p>
<p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
<p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
<p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
<p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
</article>
CSS
article {
columns: 3;
}
h2 {
column-span: all;
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Multi-column Layout Module column-span の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser