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

scroll-padding-inline-startプロパティは、CSSのスクロールスナップ機能において、スクロールコンテナの内側にパディング（余白）を設定するためのプロパティです。このプロパティは、スクロールコンテナが子要素にスクロールスナップする際に、そのターゲット要素がコンテナの開始方向からどれだけ内側の位置に表示されるべきかを定義します。

具体的には、Webページに固定されたヘッダーやサイドバーなどの要素がある場合、通常、スクロールスナップによって特定のコンテンツへ移動すると、そのコンテンツが固定要素の下に隠れて見えなくなってしまうことがあります。scroll-padding-inline-startプロパティを使用することで、スクロールスナップの目標位置を調整し、指定したパディング分の余白をスクロールコンテナの開始方向（インライン方向の開始側）に追加します。これにより、ターゲットコンテンツが固定要素に隠れることなく、常に可視領域に適切に表示されるようになります。

「inline-start」とは、テキストの書字方向における開始位置を指す論理的な概念です。例えば、日本語や英語のように左から右へ記述する言語環境では、物理的な左側が「inline-start」に相当します。このプロパティは、<length>（例: 100px）や<percentage>（例: 10%）などの値を指定して利用します。スクロールコンテナにこのプロパティを設定することで、ユーザーは目的のコンテンツを常に快適に閲覧できるようになります。

Copy
1.selector {
2  scroll-padding-inline-start: <length-percentage>;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません