::column
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
::column は CSS の擬似要素で、 CSS 段組みレイアウトによってコンテナーのコンテンツを複数の段で表示するように設定した場合に生成される、個々の段を表します。 ::column 擬似要素を使用すると、レイアウトに影響を与えないスタイルを、これらの生成された断片に適用することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
:column 実験的 | 135 | 135 | | | 135 | |
nested scroll-marker 実験的 `::column::scroll-marker` ネストされた擬似要素 | 135 | 135 | | | 135 | |
基本構文
CSS
.multi-col::column {
scroll-snap-align: start;
}
.multi-col::column::scroll-marker {
content: '';
}ライブデモ
実務での使いどころ
-
カラムごとのスクロールスナップ
マルチカラムレイアウトの各列にスクロールスナップを設定し、列単位でスムーズにスクロールできるUIを作成できます。
注意点
- Chrome 135以降のみでサポートされる非常に新しい機能です。スタイル適用はスクロールスナップ関連プロパティに限定されています。
アクセシビリティ
- スクロールスナップ付きのカラムナビゲーションを実装する場合、キーボード操作でも各列にアクセスできることを確認してください。