【画像・要素を中央に配置】CSSの「scroll-snap-align」で実現するスクロールスナップ配置の全貌

CSS スクロールスナップ配置（scroll-snap-align）解説

scroll-snap-align は、スクロールスナップ機能で要素をどのように配置するかを制御する CSS プロパティです。このプロパティを使用することで、スクロール時に要素を画面の中央や端などにピタッと配置することができます。

使い方

scroll-snap-align プロパティは、以下の2つの値を指定できます。

• start: 要素の開始位置をスナップポイントに配置します。
• center: 要素の中央をスナップポイントに配置します。
• end: 要素の終了位置をスナップポイントに配置します。

例

以下の例では、scroll-snap-align プロパティを使用して、画像を画面の中央に配置します。

<div class="container">
  <img src="image.jpg" alt="Image">
</div>

.container {
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.container img {
  scroll-snap-align: center;
}

注意点

• scroll-snap-align プロパティは、scroll-snap-type プロパティが y または x に設定されている場合にのみ有効です。
• scroll-snap-align プロパティは、子要素に対してのみ適用されます。親要素に対しては適用されません。

スクロールスナップ配置（scroll-snap-align）サンプルコード

画像を画面中央に配置

<div class="container">
  <img src="image.jpg" alt="Image">
</div>

.container {
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.container img {
  scroll-snap-align: center;
}

要素を左右に並べて配置

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  width: 400px;
  height: 200px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
  scroll-snap-align: center;
}

要素を画面端と中央に交互に配置

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

.container {
  width: 400px;
  height: 200px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;

  &:nth-child(even) {
    scroll-snap-align: start;
  }

  &:nth-child(odd) {
    scroll-snap-align: center;
  }
}

要素を画面端と中央にアニメーションで配置

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

.container {
  width: 400px;
  height: 200px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;

  &.active {
    scroll-snap-align: center;
    animation: scroll-snap 1s ease-in-out infinite;
  }

  @keyframes scroll-snap {
    0% {
      scroll-snap-align: start;
    }

    50% {
      scroll-snap-align: center;
    }

    100% {
      scroll-snap-align: start;
    }
  }
}

.container:hover .item:nth-child(2) {
  &.active {
    animation-play-state: running;
  }
}

スクロールスナップ配置（scroll-snap-align）のその他の方法

margin プロパティを使用して、要素を左右に中央配置することができます。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  width: 400px;
  height: 200px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 0 auto;
}

flexbox を使用して、要素を左右に中央配置することができます。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  width: 400px;
  height: 200px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  display: flex;
  justify-content: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

CSS Grid を使用して、要素を左右に中央配置することができます。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  width: 400px;
  height: 200px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  display: grid;
  place-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

これらの方法は、scroll-snap-align プロパティよりも古いブラウザで動作する可能性があります。

注意点

これらの方法は、scroll-snap-align プロパティと組み合わせて使用することはできません。

scroll-snap-align プロパティ以外にも、スクロールスナップ配置を実現する方法があります。これらの方法を参考に、さまざまなスクロールスナップ配置を試してみてください。