column-span
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
column-span
は CSS のプロパティで、値に all
を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。
試してみましょう
複数の段にまたがる要素は段抜き要素 (spanning element) と呼びます。
構文
css
/* キーワード値 */
column-span: none;
column-span: all;
/* グローバル値 */
column-span: inherit;
column-span: initial;
column-span: revert;
column-span: revert-layer;
column-span: unset;
column-span
プロパティは以下に挙げたキーワード値のうちの一つで指定します。
値
公式定義
初期値 | none |
---|---|
適用対象 | フロー内のブロックレベル要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
column-span =
none |
<integer [1,∞]> |
all |
auto
例
段抜きの見出しの設定
この例では、見出しが記事のすべての段にまたがって作成されます。
HTML
html
<article>
<h2>すべての段にまたがる見出し</h2>
<p>
h2 はすべての段にまたがるようにします。残りのテキストはそれぞれの段に分散させます。
</p>
<p>
これは、 CSS の `columns` プロパティを使用して 3 つの段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。
</p>
<p>
これは、 CSS の `columns` プロパティを使用して 3 つの段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。
</p>
<p>
これは、 CSS の `columns` プロパティを使用して 3 つの段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。
</p>
<p>
これは、 CSS の `columns` プロパティを使用して 3 つの段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。
</p>
</article>
CSS
css
article {
columns: 3;
}
h2 {
column-span: all;
}
結果
仕様書
Specification |
---|
CSS Multi-column Layout Module Level 1 # column-span |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
column-span | ||||||||||||
all | ||||||||||||
none |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.