::column

概要

マルチカラムレイアウトコンテナの個々の列を直接スタイリングできる新しい擬似要素です。現時点ではスクロールスナップ関連のCSSプロパティのみ適用可能で、::scroll-marker 擬似要素と組み合わせてカラム間のスナップナビゲーションを実現できます。マルチカラムレイアウトのインタラクティブ性を大幅に向上させる可能性を持つ機能です。

対応ブラウザ

基本構文

.multi-col::column {
  scroll-snap-align: start;
}
.multi-col::column::scroll-marker {
  content: '';
}

実務での使いどころ

• カラムごとのスクロールスナップ

  マルチカラムレイアウトの各列にスクロールスナップを設定し、列単位でスムーズにスクロールできるUIを作成できます。

注意点

アクセシビリティ

• スクロールスナップ付きのカラムナビゲーションを実装する場合、キーボード操作でも各列にアクセスできることを確認してください。

参考リンク

• MDN Web Docs — ::column