フルスクリーンセクションとは

画面の高さいっぱいを使うセクションを縦に連ねて、1 画面ずつ見せていくレイアウト。

概要

画面の高さいっぱい（100vh）を使うセクションを縦に連ねて配置し、スクロールするたびに次の画面が 1 つずつ現れるように見せるレイアウトです。ストーリー性のあるブランドサイトや、サービス紹介ページの導入部分でよく使われます。

別名

表記ゆれ：フルスクリーンセクション、100vh セクション、全画面セクション、fullscreen section

「100vh セクション」は CSS の単位に由来する呼び方で、実装のイメージを伝えたいときに使われます。

AI への伝え方

「画面いっぱいのセクションを縦に並べて」で通じます。スマホではブラウザのアドレスバーの表示・非表示で 100vh の高さがガタつくことがあるため、気になる場合は「スマホでは 100dvh を使って」のように動的な高さの単位を指定してもらうと安定します。1 画面ずつピタッと止まるように見せたい場合は「スクロールスナップも付けて」と伝えてください。

似たパーツとの違い

「ヒーローセクション」は画面の一番上に置く導入部分 1 つを指すことが多いのに対し、フルスクリーンセクションは同じ考え方（画面いっぱいの高さ）のセクションを複数連ねて使う点が異なります。1 画面ずつピタッと止まるスクロールの挙動は「スクロールスナップ」という別のパーツ（CSS の scroll-snap-type）と組み合わせて実現します。

デモ

コード

HTML

<div class="fullscreen-section-demo">
  <section class="fullscreen-section-demo__section fullscreen-section-demo__section--1">
    <h2>セクション 1</h2>
  </section>
  <section class="fullscreen-section-demo__section fullscreen-section-demo__section--2">
    <h2>セクション 2</h2>
  </section>
  <section class="fullscreen-section-demo__section fullscreen-section-demo__section--3">
    <h2>セクション 3</h2>
  </section>
</div>

CSS

.fullscreen-section-demo {
  font-family: sans-serif;
  color: #ffffff;
  text-align: center;
}

.fullscreen-section-demo__section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 48px);
}

.fullscreen-section-demo__section h2 {
  margin: 0;
  font-size: 22px;
}

.fullscreen-section-demo__section--1 {
  background: #0017c1;
}

.fullscreen-section-demo__section--2 {
  background: #333333;
}

.fullscreen-section-demo__section--3 {
  background: #666666;
}