Web制作者必見！CSS scroll-padding-block-startで実現できる高度なレイアウトテクニック

このプロパティを使用すると、以下のことが可能になります。

ターゲット要素とスクロールポートの端との間により多くの余白を設ける
固定ツツールバーやサイドバーなどの他のコンテンツによって隠されているスクロールポート領域を除外する

scroll-padding-block-start は、以下の値を受け付けます。

グローバル値
inherit、initial、unset など。
キーワード値
auto など。デフォルトでは auto に設定されており、ブラウザが最適な値を計算します。
長さの値
px、em、vh、% などの単位で指定された長さの値。

例

.example {
  scroll-padding-block-start: 20px;
}

この例では、.example 要素のスクロールポートの先頭側に 20px の余白が追加されます。

scroll-padding-block-start は、すべての主要なブラウザでサポートされています。
scroll-padding-block-start は、CSS スクロールスナップモジュールの一部です。このモジュールは、要素をスクロールポート内の特定の位置にスナップするように設定するために使用されます。

例 1：固定ヘッダーによる余白を追加する

この例では、固定ヘッダーによって隠されているスクロールポート領域を除外するために、scroll-padding-block-start プロパティを使用します。

<!DOCTYPE html>
<html>
<head>
<style>
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
}

.content {
  scroll-padding-block-start: 50px;
}
</style>
</head>
<body>
<header>
  <h1>My Website</h1>
</header>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ligula eget dui mollis hendrerit. Nullam id enim sit amet quam aliquet semper. Nunc eget nibh quis neque mollis ullamcorper sit amet non mauris. Donec ac lectus sed arcu aliquam molestie vitae eget quam. Sed nec enim eget ligula semper tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ac lectus sed arcu aliquam molestie vitae eget quam. Sed nec enim eget ligula semper tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ligula eget dui mollis hendrerit. Nullam id enim sit amet quam aliquet semper. Nunc eget nibh quis neque mollis ullamcorper sit amet non mauris. Donec ac lectus sed arcu aliquam molestie vitae eget quam. Sed nec enim eget ligula semper tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ac lectus sed arcu aliquam molestie vitae eget quam. Sed nec enim eget ligula semper tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
</div>
</body>
</html>

この例では、header 要素は固定位置に設定され、常に画面の上部に表示されます。 content 要素には scroll-padding-block-start: 50px; が設定されているため、スクロールポートの先頭側に 50px の余白が追加されます。これにより、header 要素によって隠されていたコンテンツが表示されるようになります。

例 2：スクロールスナップと組み合わせて使用する

この例では、scroll-padding-block-start プロパティを scroll-snap-type プロパティと組み合わせて、スクロールポート内の特定の位置に要素をスナップするように設定します。

<!DOCTYPE html>
<html>
<head>
<style>
section {
  display: flex;
  flex-direction: column;
  height: 200px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

section h2 {
  text-align: center;
  margin-bottom: 10px;
}

.content {
  scroll-snap-type: y mandatory;
  scroll-padding-block-start: 50px;
}
</style>
</head>
<body>
<div class="content">
  <section>
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ligula eget dui mollis hendrerit. Nullam id enim sit amet quam aliquet semper. Nunc eget nibh quis neque mollis ullamcorper sit amet non mauris. Donec ac lectus sed arcu aliquam molestie vitae eget quam. Sed nec enim eget ligula semper tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ligula eget dui mollis hendrer

「scroll-padding-block-start」プロパティは比較的新しい機能であり、すべてのブラウザで完全にサポートされているわけではありません。そのため、古いブラウザでの互換性が必要な場合は、代替手段が必要になる場合があります。

代替手段として以下の方法が考えられます。

margin-topを使用する

最も単純な代替手段は、margin-top プロパティを使用することです。

.example {
  margin-top: 50px;
}

この例では、.example 要素の上部に 50px のマージンが追加されます。これは、scroll-padding-block-start: 50px; と同じ効果になります。

ただし、margin-top にはいくつかの注意点があります。

スクロールスナップと互換性がありません。
要素が他の要素と重なる可能性があります。
要素の高さを増加させます。これは、レイアウトを崩す可能性があります。

padding-topを使用する

もう 1 つの代替手段は、padding-top プロパティを使用することです。

.example {
  padding-top: 50px;
}

この例では、.example 要素の上部に 50px の余白が追加されます。これは、scroll-padding-block-start: 50px; と同じ視覚的な効果になりますが、コンテンツ領域の高さを変えません。

ただし、padding-top にもいくつかの注意点があります。

スクロールスナップと互換性がありません。
要素が他の要素と重なる可能性があります。
要素の内容が下に押されます。

カスタムスクロールバーを使用する

より高度な代替手段として、カスタムスクロールバーを使用する方法があります。これにより、スクロールポートの外観と動作を完全に制御できます。

これは、複雑なレイアウトや高度なスクロール動作が必要な場合に役立ちます。

ただし、カスタムスクロールバーには、以下のデメリットがあります。

ユーザーにとって使いにくい場合がある
すべてのブラウザで同じように動作するとは限らない
開発と実装に時間がかかる

「scroll-padding-block-start」プロパティは、スクロールポートの余白を制御するための強力な方法ですが、すべてのブラウザでサポートされているわけではありません。

代替手段としては、margin-top、padding-top、またはカスタムスクロールバーを使用する方法があります。