概要

scroll-margin-inlineは、CSSで横方向のスクロール位置を調整するためのプロパティで、要素がスクロールされた際にインライン方向（左右）の余白を設定できます。このプロパティを使用することで、要素がスクロールされた際の表示位置を左右に調整し、ユーザーにとって見やすい位置に配置できます。ページ内リンクや要素のスクロール位置のカスタマイズに便利です。

scroll-margin-inlineの基本構文

scroll-margin-inline: <length>;

または、左右の余白を個別に指定することも可能です。

scroll-margin-inline: <left-margin> <right-margin>;

• length
  左右の余白を指定する値です。px、em、rem、%などの単位で設定できます。

値の説明

• px（ピクセル）
  絶対的な長さを指定するための一般的な単位です。例えば、scroll-margin-inline: 20px;と指定すると、左右に20pxのマージンが設定されます。

• em、rem
  フォントサイズに基づく相対単位で、レスポンシブデザインに適しています。

• %（パーセント）
  コンテナの幅に対する相対的なマージンを指定できます。

使用例

基本的な使用例 - スクロール位置の調整

以下のコードは、スクロールされた要素が画面の左右に余白を持って表示されるように調整する例です。

.item {
    scroll-margin-inline: 20px; /* 左右に20pxのマージン */
}

この設定により、.itemクラスの要素がスクロールされた際に左右に20pxの余白が追加されます。

個別に左右の余白を指定する

左に30px、右に10pxの余白を個別に設定する例です。

.item {
    scroll-margin-inline: 30px 10px;
}

この設定により、左方向に30px、右方向に10pxの余白がそれぞれ追加され、スクロール位置が調整されます。

水平方向のスクロール調整例

scroll-margin-inlineは、横方向のスクロール位置調整にも有効です。特定の要素が見切れないようにスクロールを調整する際に便利です。

.horizontal-item {
    scroll-margin-inline: 50px; /* 左右のスクロール位置に50pxの余白 */
}

このコードにより、要素がスクロールされた際に左右に50pxの余白を持つようにスクロールされます。

カルーセルやスライダーでの使用例

カルーセルやスライダーコンテンツで、アイテムが左右にスクロールされた際に見やすい位置に配置されるように調整することもできます。

.slider-item {
    scroll-margin-inline: 10%;
}

この設定では、スライダー内の各アイテムがスクロールされたときに、左右に10%の余白が追加されます。

注意点

• scroll-margin-inlineは、スクロール位置に対してのみマージンを設定し、実際のレイアウトマージンには影響を与えません。このため、見た目のマージンとスクロールのマージンが異なる場合があります。
• ページのインタラクティブなナビゲーションやスクロールスナップの調整時に特に有効で、見やすさを向上させます。
• 特定のスクロールイベントやアンカーリンクの位置を調整する際に役立ちます。

まとめ

scroll-margin-inlineは、CSSで要素の横方向のスクロール位置を調整するためのプロパティです。左右のマージンを設定することで、ユーザーがスクロールで要素にアクセスする際に見やすく配置できます。ページ内リンクやカルーセル、スライダーなどでスクロール位置のカスタマイズが必要な場合に、このプロパティを活用してデザインの調整を行ってみてください。