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 を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。

試してみましょう

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

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

複数の段にまたがる要素は段抜き要素 (spanning element) と呼びます。

構文

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

値

none

この要素は複数の段にまたがりません。

all

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

公式定義

初期値none
適用対象フロー内のブロックレベル要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

column-span = 
  none  |
  all

例

段抜きの見出しの設定

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

HTML

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

css
article {
  columns: 3;
}

h2 {
  column-span: all;
}

結果

仕様書

Specification
CSS Multi-column Layout Module Level 1
# column-span

ブラウザーの互換性

BCD tables only load in the browser

関連情報