::column
マルチカラムレイアウトコンテナの個々の列を直接スタイリングできる新しい擬似要素です。現時点ではスクロールスナップ関連のCSSプロパティのみ適用可能で、::scroll-marker 擬似要素と組み合わせてカラム間のスナップナビゲーションを実現できます。マルチカラムレイアウトのインタラクティブ性を大幅に向上させる可能性を持つ機能です。
概要
マルチカラムレイアウトコンテナの個々の列を直接スタイリングできる新しい擬似要素です。現時点ではスクロールスナップ関連のCSSプロパティのみ適用可能で、::scroll-marker 擬似要素と組み合わせてカラム間のスナップナビゲーションを実現できます。マルチカラムレイアウトのインタラクティブ性を大幅に向上させる可能性を持つ機能です。
対応ブラウザ
デスクトップ
Chrome 135+
Edge 135+
Safari 未対応
Firefox 未対応
モバイル
Chrome Android 135+
Safari iOS 未対応
Firefox Android 未対応
基本構文
CSS
.multi-col::column {
scroll-snap-align: start;
}
.multi-col::column::scroll-marker {
content: '';
} 実務での使いどころ
-
カラムごとのスクロールスナップ
マルチカラムレイアウトの各列にスクロールスナップを設定し、列単位でスムーズにスクロールできるUIを作成できます。
注意点
- Chrome 135以降のみでサポートされる非常に新しい機能です。スタイル適用はスクロールスナップ関連プロパティに限定されています。
アクセシビリティ
- スクロールスナップ付きのカラムナビゲーションを実装する場合、キーボード操作でも各列にアクセスできることを確認してください。