【CSS Modules】scroll-margin省略形プロパティの使い方

scroll-marginプロパティは、CSSスクロールスナップの動作を制御するためのマージン設定を保持するプロパティです。このプロパティは、スクロールコンテナが特定のスクロールスナップポイントにスナップする際に、そのスナップポイントの最終的な位置を調整するためのオフセット、つまりマージンを定義します。具体的には、scroll-margin-top、scroll-margin-right、scroll-margin-bottom、scroll-margin-leftの各プロパティを一括で設定するためのショートハンド（短縮形）として機能します。

Webページにおいて、固定されたヘッダーやフッター、サイドバーなどの要素が存在する場合、スクロールスナップ機能を使って特定のセクションへ移動した際に、そのセクションのコンテンツが固定要素の下に隠れてしまうことがあります。scroll-marginプロパティは、このような状況を防ぐために、スナップターゲットとなる要素の「有効なスナップ領域」を内側に縮小するマージンを指定します。これにより、ユーザーが要素にスクロールした際に、固定要素によってコンテンツが覆い隠されることなく、常に適切な位置に表示されるようになります。

値には、長さを示す単位（例: 10px、1em）またはパーセンテージ（例: 5%）を指定でき、これらはスクロールスナップされる要素の外側からの距離として解釈されます。例えば、scroll-margin: 50px;と設定すると、上下左右すべてに50ピクセルのマージンが適用され、スナップ位置がその分だけ内側にオフセットされます。この機能は、ユーザーエクスペリエンスを向上させ、より直感的で使いやすいスクロール動作を実現するために非常に重要です。

Copy
1selector {
2  scroll-margin: 10px 20px 30px 40px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません