column-span
column-span は CSS のプロパティで、値に all を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。
複数の段にまたがる要素は段抜き要素 (spanning element) と呼びます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 50 | 12 | 71 | 9 | 50 | 9 | |
all | 6 | 12 | 71 | 5.1 | 18 | 5 |
none | 6 | 12 | 71 | 5.1 | 18 | 5 |
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (6)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (12)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (5.1)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (5)
基本構文
CSS
.article {
columns: 3;
}
.article h2 {
column-span: all;
text-align: center;
}ライブデモ
実務での使いどころ
-
新聞風レイアウトのセクション見出し
マルチカラムの記事内で見出しをすべての列にまたがらせ、セクションの区切りを明確にできます。
注意点
- column-span は all と none の2値のみで、特定の列数にまたがる設定はできません。また、フレックスボックスやグリッドレイアウトでは使用できません。
アクセシビリティ
- column-span は視覚的な表示のみを変更し、DOMの順序や読み上げ順序には影響しません。