概要

scroll-margin-blockは、CSSでスクロール位置を調整するためのプロパティで、要素がスクロールされた際にブロック方向（上下）の余白を設定できます。このプロパティを使用することで、要素がスクロールインターセクションで配置される位置を簡単に調整でき、リンク先の見やすさを向上させることが可能です。スクロール位置のカスタマイズが必要な場合に非常に役立ちます。

scroll-margin-blockの基本構文

scroll-margin-block: <length>;

または、上下の余白を個別に指定できます。

scroll-margin-block: <length> <length>;

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

値の説明

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

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

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

使用例

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

リンククリックなどでスクロールする際に、要素が画面の上端に貼り付きすぎないように余白を設けることができます。

.section {
    scroll-margin-block: 20px; /* 上下に20pxのマージン */
}

このコードでは、.sectionクラスの要素がスクロールされると、上下に20pxの余白が追加されます。

個別に上下の余白を指定する

上部に30px、下部に10pxの余白を個別に設定する例です。

.section {
    scroll-margin-block: 30px 10px;
}

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

リンク先の見やすさを調整する例

ページ内リンクをクリックした際に、ターゲット要素が見やすい位置に表示されるように、スクロールマージンを設定します。

.target {
    scroll-margin-block: 50px; /* ターゲット要素の上に50pxの余白 */
}

この設定により、リンク先の要素がスクロールされると、50pxの余白を持ってスクロールされます。これにより、ページの固定ヘッダーと重ならないようにすることができます。

フォーカス時にスクロール位置を調整する例

scroll-margin-blockは、フォーカス時にも有効です。入力フィールドがフォーカスされるときの位置調整にも使用できます。

input:focus {
    scroll-margin-block: 20px;
}

この設定により、フォーム入力時にスクロールされた要素が上下20pxの余白を持つように表示されます。

注意点

• scroll-margin-blockは、スクロール位置に対してマージンを設定するプロパティであり、実際のレイアウトマージンには影響を与えません。あくまでスクロール位置を調整するためのものです。
• スクロールの調整は、要素がscroll-snap機能やフォーカス、アンカーリンクに応じてスクロールされる際に適用されます。
• ページの固定ヘッダーなどとリンク位置が被る場合に特に有効です。スクロール時に要素が見えにくくなる問題を簡単に解決できます。

まとめ

scroll-margin-blockは、CSSでスクロール位置を柔軟に調整できるプロパティです。上下のスクロールマージンを設定することで、ユーザーがリンク先やフォーカスされた要素をより見やすくすることができます。特に固定ヘッダーと重なる問題の解消や、ページ内リンクの改善に役立つため、サイトのユーザビリティを向上させるためにぜひ活用してみてください。