column-spanプロパティ

最終更新日：2023-10-29
公開日：2016-09-06

段組が適用されている要素の子要素について、段組を跨いで表示したい場合に使用するプロパティです。

初期値

none
継承

不可
適用できる要素

絶対配置、回り込み指定がされていないブロックレベル要素

column-spanプロパティに指定できる値

column-spanプロパティは以下の値を指定することができます。

値	内容
`none`	初期値。通常の段組として表示。
`all`	段組をまたいで表示。

以降は使用例とブラウザの表示例を紹介していきます。

使用例

上から段組を跨がない表示である「none」、跨いだ表示をする「all」とそれぞれ指定した例です。

CSS コード例

.box1 {
  column-count: 3;
  column-gap: normal;
}
.box1 .element1 {
  column-span: none;
  font-size: 100%;
}
.box2 {
  column-count: 3;
  column-gap: normal;
}
.box2 .element1 {
  column-span: all;
  font-size: 100%;
}

HTML コード例

<section class="box1">
  <h1 class="element1"> column-spanプロパティの表示例</h1>
  <p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。アジア系の観光客も多く、浴衣を着て川越街道を歩くことは素晴らしいコンテンツになっているようです。</p>
</section>
<section class="box2">
  <h1 class="element1"> column-spanプロパティの表示例</h1>
  <p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。アジア系の観光客も多く、浴衣を着て川越街道を歩くことは素晴らしいコンテンツになっているようです。</p>
</section>

記事一覧