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

scroll-margin-blockプロパティは、スクロールコンテナ内で要素がスクロールスナップする際に、その要素のブロック方向の開始側と終了側にどれだけのマージン（余白）を設けるかを定義するプロパティです。

ウェブページにおいて、特定のセクションやコンテンツ群をユーザーがスクロールした際に、ぴったりと決まった位置に要素を吸着させる「スクロールスナップ」という機能があります。この機能を使う際、ターゲットとなる要素がスクロールコンテナの端にぴったりと吸着しすぎると、コンテンツの一部が隠れてしまったり、見栄えが悪くなったりする場合があります。scroll-margin-blockプロパティは、このような状況を避けるために活用されます。

このプロパティは、スクロールスナップのターゲット要素がブロック方向の開始エッジや終了エッジに吸着した際に、その要素の周囲に一定の「見えない余白」を確保します。これにより、ユーザーはスナップされた要素のコンテンツを完全に、かつ適切な位置で閲覧できるようになります。

scroll-margin-blockはCSSの論理プロパティに分類され、物理的な方向（例: 上下左右）ではなく、コンテンツの書字方向に基づきます。例えば、横書きの文書であれば通常は上方向と下方向、縦書きの文書であれば右方向と左方向にマージンが適用されます。このプロパティは、個別に設定するscroll-margin-block-startとscroll-margin-block-endという二つのプロパティをまとめて指定できるショートハンド形式であり、ブロック方向の両端に対するマージンを一括で管理するのに便利です。これにより、ユーザーインターフェースにおけるスクロール体験をより洗練されたものにすることができます。

Copy
1scroll-margin-block: 20px;

引数なし

引数はありません

戻り値なし

戻り値はありません