CSSスクロールスナップの新しい武器！scroll-margin-block-endプロパティでレイアウトを自由自在に

スクロールスナップとは、ページをスクロールする際に、特定の要素を画面端にピタッと止める機能です。例えば、ナビゲーションメニューを常に画面端に表示させたり、長いページを閲覧する際に、各セクションをスムーズに切り替えたりするのに役立ちます。

scroll-margin-block-end プロパティは、スクロールスナップにおける要素の末尾側のマージンを設定します。これは、要素がスクロールスナップされたときに、要素とコンテナーの端との間の距離を調整するために使用されます。

このプロパティの値は、長さ（px、cm、inなど）または割合（%）で指定できます。正の値を設定すると、要素がコンテナーの端から離れます。負の値を設定すると、要素がコンテナーの端よりも内側に配置されます。

scroll-margin-block-end プロパティの例：

.my-element {
  scroll-snap-type: mandatory;
  scroll-snap-align: end;
  scroll-margin-block-end: 20px;
}

この例では、.my-element クラスを持つ要素は、スクロールスナップが強制的に有効になり、コンテナーの端にピタッとスナップされます。さらに、要素の末尾側のマージンが 20px 設定されているため、要素とコンテナーの端との間に 20px の隙間ができます。

scroll-margin-block-end プロパティは、以下のブラウザでサポートされています：

Edge
Safari
Firefox
Chrome

scroll-margin-block-end プロパティは、インライン方向（水平方向）のスクロールスナップにのみ適用されます。ブロック方向（垂直方向）のスクロールスナップには、scroll-margin-block-start プロパティを使用します。
scroll-margin-block-end プロパティは、scroll-snap-type プロパティと併用して使用する必要があります。scroll-snap-type プロパティは、スクロールスナップの動作を決定します。

例 1：ナビゲーションメニューを常に画面端に表示

この例では、ナビゲーションメニューを常に画面右端に表示します。

<nav class="navigation">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">商品</a></li>
    <li><a href="#">ブログ</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

.navigation {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 200px;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation li {
  padding: 10px;
}

.navigation li a {
  display: block;
  text-decoration: none;
  color: #333;
}

このコードに scroll-margin-block-end プロパティを追加すると、ナビゲーションメニューと画面端との間に隙間を作ることができます。

.navigation {
  /* ... 既存のスタイル ... */
  scroll-margin-block-end: 20px;
}

例 2：長いページをセクションごとに区切る

この例では、長いページをセクションごとに区切り、スクロールスナップを使用して、各セクションをスムーズに切り替えます。

<section class="section" id="section1">
  <h1>セクション 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>

<section class="section" id="section2">
  <h1>セクション 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>

<section class="section" id="section3">
  <h1>セクション 3</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>

body {
  height: 100vh;
  overflow: hidden;
}

.section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.section h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.section p {
  font-size: 16px;
}

このコードに scroll-snap-type と scroll-margin-block-end プロパティを追加すると、各セクションがスクロールスナップターゲットになり、スムーズに切り替わるようになります。

body {
  /* ... 既存のスタイル ... */
  scroll-snap-type: mandatory;
}

.section {
  /* ... 既存のスタイル ... */
  scroll-snap-align: start;
  scroll-margin-block-end: 100px;
}

これらの例はほんの一例であり、scroll-margin-block-end プロパティを使用して様々なレイアウトを作成することができます。

アニメーション付きのスクロールスナップを作成する
ギャラリーをスナップで切り替える
カード型レイアウトを作成する

例えば、CSS の scroll-margin-block-end プロパティ以外の方法で、スクロールスナップを実現したい場合は、以下の方法があります。

CSS Grid や Flexbox などのレイアウトレイアウトモジュールを使用して、要素を配置する。
ライブラリ を使用して、スクロールスナップ機能を追加する。
JavaScript を使用して、スクロールをプログラムで制御する。