CSScolumn-span プロパティは、値に all を設定した場合、段組みレイアウトですべての段に要素をまたがらせることができます。

/* キーワード値 */
column-span: none;
column-span: all;

/* グローバル値 */
column-span: inherit;
column-span: initial;
column-span: unset;

複数の段にまたがる要素は、スパニング要素 (spanning element) と呼びます。

構文

column-span プロパティは以下に挙げたキーワード値のうちの一つで指定します。

none
要素は複数の段にまたがりません。
all
要素がすべての段にまたがります。その要素よりも前に現れる通常フローのコンテンツは、自動的にすべての段で均等になります。その要素は新しいブロック整形文脈を作成します。

構文形式

none | all

この例では、見出しが記事のすべての段にまたがって作成されます。

HTML

<article>
  <h2>My Very Special Columns</h2>
  <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 の定義
草案 初回定義。

初期値none
適用対象フロート内に配置された、フローティングや絶対配置がなされていない全てのブロックレベル要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 50
完全対応 50
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10Opera 完全対応 11.1
完全対応 11.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 50
完全対応 50
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 50
完全対応 50
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 未対応 なしOpera Android ? Safari iOS 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 5.0
完全対応 5.0
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, SphinxKnight, fscholz, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,