【完全保存版】CSSだけで実装！縦スクロールカルーセルとアニメ付きアンダーラインの最前線 |

「JavaScriptなしでリッチなUIを作りたい」──そんな声に応えるのが、CSSの Scroll Snap 機能と アニメーション の組み合わせです。本記事では、縦方向のカルーセル構造と、タイトル要素に動的なアンダーラインを描画する演出を、CSSのみで実現する実装方法を紹介します。

これからフロントエンドを学びたい方にも、すでにWeb制作の現場で活躍している方にも、実用的かつ拡張性の高いコードと解説をお届けします。

1. 実装デモと完成イメージ
2. HTML構造のポイント
3. CSSでスクロールスナップを実現
4. タイトルアニメーションの実装
5. JavaScriptでアニメーションを制御
6. 応用展開：背景・画像・動画との組み合わせ
7. まとめ：ノーJSでもここまでできる！

1. 実装デモと完成イメージ

本記事の構成では、縦方向にスクロールするたびに、各セクションがビューポートにぴったり表示されます。その中の見出しには、スクロールインに応じてアンダーラインがスッと描かれる演出が入ります。

このようなビジュアルは、トップページの導線強化や、ブランド演出に効果的です。

2. HTML構造のポイント

セクションごとの内容は <section> 要素で囲い、親要素に .carousel クラスを指定してスクロール管理を行います。

<pre><code>&lt;div class="carousel"&gt;
    &lt;section class="text-section"&gt;
        &lt;h2 class="under-line"&gt;タイトルが入ります&lt;/h2&gt;
        &lt;p&gt;ここに概要が入ります。ここに概要が入ります。&lt;/p&gt;
    &lt;/section&gt;
    &lt;!-- 以下 同様に4つ以上セクションを用意可能 --&gt;
&lt;/div&gt;
</code></pre>

ポイント：セクション数は自由に増減可能。画面全体を使ったレイアウトなので、見せたい情報を1ブロックごとに設計できます。

3. CSSでスクロールスナップを実現

Scroll Snapは、スクロール位置をピタッと固定できるCSSの機能です。縦スクロールで「1画面ごとに固定される」ような動きを、CSSのみで再現可能です。

/* カルーセル全体 */
.carousel {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}

/* 各セクション */
.text-section {
  display: grid;
  place-content: center;
  scroll-snap-align: start;
  height: 100vh;
  text-align: center;
  line-height: 1.5;
  background-color: #efefef;
}

/* 奇数行の背景色 */
.text-section:nth-child(odd) {
  background-color: #ffffff;
}

補足：height: 100vh を使って画面サイズぴったりにセクションを表示し、モバイルでも没入感の高いUIが実現できます。

4. タイトルアニメーションの実装

タイトルの下に黄色いラインがアニメーションで現れる演出は、以下のように linear-gradient を用いた背景で再現します。

h2 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.under-line {
  background: linear-gradient(transparent 75%, #FFFE03 60%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left bottom 10px;
}

@keyframes underLine {
  to {
    background-size: 100% 100%;
  }
}

.under-line-visible {
  animation: underLine 1s ease 0.5s forwards;
}

これにより、下線が時間差でスッと出てくるようなエフェクトがCSSのみで可能になります。

5. JavaScriptでアニメーションを制御

スクロールインのタイミングでアンダーラインのアニメーションを発火させたい場合、IntersectionObserverを使ってクラスを付与します。

&lt;script&gt;
document.addEventListener("DOMContentLoaded", () =&gt; {
  const targets = document.querySelectorAll(".under-line");

  const observer = new IntersectionObserver(entries =&gt; {
    entries.forEach(entry =&gt; {
      if (entry.isIntersecting) {
        entry.target.classList.add("under-line-visible");
      }
    });
  }, {
    threshold: 0.5
  });

  targets.forEach(target =&gt; observer.observe(target));
});
&lt;/script&gt;

ポイント：IntersectionObserverは軽量で、複雑なスクロールイベント監視よりもパフォーマンスに優れています。

6. 応用展開：背景・画像・動画との組み合わせ

この縦カルーセル構造は、以下のようなコンテンツと非常に相性が良いです。

背景動画：background-videoを使えば映画のイントロ風表現が可能
背景画像：各セクションごとに画像を設定してスライド感を演出
コンポーネント化：ReactやVueに組み込んでも自然に動作

.text-section {
  background-image: url("section1.jpg");
  background-size: cover;
  background-position: center;
}

7. まとめ：ノーJSでもここまでできる！

CSSの進化により、かつてはJavaScriptでなければ実現できなかったカルーセルやアニメーションが、今ではCSS単体でもかなり高品質に作れるようになりました。

本記事の実装は、以下のような場面で特に活躍します：

ポートフォリオやランディングページでの導線演出
リッチなトップページのビジュアル設計
JavaScriptを使わずに軽量なサイトを構築したいとき

シンプルな構成ながら応用の幅が広いので、ぜひ自分のプロジェクトに取り入れて、モダンなUIづくりを楽しんでください。

(Visited 12 times, 1 visits today)

目次