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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

50

あり -webkit-

12

12 -webkit-

なし10

11.1

15 -webkit-

あり -webkit-
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

50

あり -webkit-

50

あり -webkit-

あり

あり -webkit-

なし ? あり -webkit-

5.0

あり -webkit-

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

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