column-span

CSS の column-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;
}

結果

仕様策定状況

ブラウザーの対応