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

ブラウザーの互換性

BCD tables only load in the browser

関連情報