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

scroll-padding-inlineプロパティは、スクロール可能なコンテナ内のスクロール位置を調整するためのパディング値を保持するプロパティです。このプロパティは、CSSの論理プロパティであり、書字方向（テキストの進行方向）における開始側と終了側のパディングをまとめて設定するショートハンドプロパティです。具体的には、scroll-padding-inline-startとscroll-padding-inline-endの二つのプロパティを一括で定義します。

このプロパティの主な目的は、scroll-snap-typeなどのスクロールスナップ機能と組み合わせて使用される際に、特定のスクロールポイントやターゲット要素がコンテナの端にきれいに収まるようにすることです。例えば、ユーザーがページをスクロールしてあるセクションにスナップした際、そのセクションのコンテンツがコンテナの端で隠れてしまわないよう、内側に適切な余白（パディング）を設けることができます。これにより、見出しや重要な情報がスクロール領域の境界に重なることなく、常に視認しやすい状態で表示されるようになります。

scroll-padding-inlineプロパティには、CSSの長さの単位（例: 10px, 1em）やパーセンテージ値を指定できます。単一の値を指定した場合、その値はインライン方向の開始側と終了側の両方に適用されます。二つの値を指定した場合は、最初の値がインライン開始側、二番目の値がインライン終了側のパディングとして設定されます。書字方向が異なる言語環境では、インラインの物理的な方向（例: 左から右、右から左）も変化するため、さまざまなレイアウトに柔軟に対応できます。

Copy
1.element {
2  scroll-padding-inline: 20px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません