column-span

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

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

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

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

構文

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

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

公式定義

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

形式文法

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 の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
column-spanChrome 完全対応 50
完全対応 50
完全対応 6
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 71
完全対応 71
完全対応 65
無効
無効 From version 65: this feature is behind the layout.css.column-span.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10Opera 完全対応 11.1
完全対応 11.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 9
完全対応 9
完全対応 5.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 50
完全対応 50
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 50
完全対応 50
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 65
無効
完全対応 65
無効
無効 From version 65: this feature is behind the layout.css.column-span.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 11.1
完全対応 11.1
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 9
完全対応 9
完全対応 5
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 5.0
完全対応 5.0
完全対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要

凡例

完全対応  
完全対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報