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

scroll-margin-inlineプロパティは、スクロールスナップが適用される要素の、インライン方向におけるマージンオフセットを一括で指定するプロパティです。

このプロパティは、ウェブページをスクロールする際に、特定の要素がビューポート内の指定された位置に「カチッ」と吸着する「スクロールスナップ」機能と連携して使用されます。scroll-margin-inlineプロパティを設定することで、要素がビューポートにスナップする際、その要素の本来の端ではなく、指定されたマージンの分だけ内側にずらした位置でスナップするように調整することが可能です。例えば、ページ上部に固定されたヘッダーがある場合、コンテンツがヘッダーの裏に隠れるのを防ぎ、常に適切な余白を確保したいときに非常に有効です。

「inline」という名前が示す通り、このプロパティは物理的な左右の方向ではなく、現在の書字方向（例えば、日本語の横書きでは左右、縦書きでは上下）に沿ったインラインの開始側と終了側のマージンをまとめて指定します。具体的には、scroll-margin-inline-startとscroll-margin-inline-endという二つのプロパティの省略記法（ショートハンド）として機能します。これにより、コードを簡潔に保ちつつ、スクロール時の要素の配置を柔軟に制御できます。値には、pxやemといった長さ単位、または%を使用できます。このプロパティを適切に活用することで、ユーザーにとってより快適で、視覚的に整ったスクロール体験を提供することが可能になります。

Copy
1.element {
2  scroll-margin-inline: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません