右から左にスクロールする画像ギャラリーをHTML＋CSSだけで作る方法

「なんとなく流行りの右から左に自動で流れる画像ギャラリーを作りたい…」

そんな声をいただくことが、ポツポツあります。そこで今回は、プラグインを使わず、HTMLとCSSだけで実現できる画像ギャラリーの作り方をご紹介します。

特別なライブラリも一切不要です。HTMLとCSSだけで軽量かつシンプルに、横スクロールの無限ループ風ギャラリーが作れます。ブログやポートフォリオ、ランディングページのアクセントとして、ぜひ活用してください。

右から左にスクロールする画像ギャラリーの完成イメージ

こんな動きのギャラリーを想定しています。

画像が横一列に並び
ゆっくりと右から左へ自動でスクロール
無限ループのように繰り返し表示
ホバーでアニメーションを一時停止（オプション）

もちろん、流れる速度や、画像サイズ、表示させたい画像の枚数はいくらでも調整可能です。

画像ギャラリーのHTML構造

まずは画像を並べるためのHTML構造を用意します。大切なのは、画像を2セット繰り返すこと。これにより、スクロールが途切れずループ風に見せることができます。

<div class="scroll-gallery">
  <div class="scroll-track">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
    <!-- 以下、複製（ループ感のため） -->
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
  </div>
</div>

画像はお好きな枚数・内容に差し替えてください。

注意：ワードプレスでは絶対パスを指定

HTMLで画像を指定する際に、

<img src="image1.jpg" alt="">

のような相対パス（ファイル名だけ）を使うと、表示されないことがあります。特にWordPressや本番サーバーでは、以下のように絶対パスで指定する必要があります。

<img src="/wp-content/uploads/2024/09/image1.jpg" alt="">

パスの指定ミスを防ぐためには、以下の点を確認してください。

WordPressの「メディアライブラリ」から画像のURLをコピーして貼り付ける。
静的サイトの場合、imgフォルダなどに画像を配置し、正しいパスを設定（例：/images/image1.jpg）

よくわからなかったら、「メディアライブラリ」のフルパス（URL）を指定すれば間違いありません。

CSSでアニメーションを実装

次にCSSを設定します。ここでポイントになるのは、@keyframesを使って translateX で横方向にアニメーションさせること。

.scroll-gallery {
  width: 100%;
  overflow: hidden;
}

.scroll-track {
  display: flex;
  width: max-content;
  animation: scroll-left 70s linear infinite;
}

.scroll-gallery img {
  height: 200px; /* 高さは自由に調整可 */
  margin-right: 0px;
  flex-shrink: 0;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ホバー時にアニメーション停止（任意） */
.scroll-gallery:hover .scroll-track {
  animation-play-state: paused;
}

ホバー時にアニメーションが不要な場合は、コードを丸ごと削除してください。

よくあるカスタマイズ例

クライアント様からよくある微調整の要望をまとめておきました。

スクロール速度を変えたい

animation: scroll-left 70s linear infinite; の 70s を変更すれば速度が変わります。数字を大きくするとゆっくり、小さくすると速くなります。

高さをレスポンシブにしたい

height: 200px; の部分を height: 20vw; にするなど、画面幅に応じた高さにも調整可能です。

画像と画像の間隔を空けたい

margin-right: 10px; に変更するだけでOKです。

おまけ：JavaScriptでやれること（応用編）

今回の方法はHTML＋CSSだけでも完成度が高いですが、たとえば以下のようなことをしたい場合にはJavaScriptを使って拡張することもできます。

画像の読み込み後にスクロールを開始する
画像をランダムに入れ替える
速度をコントロールバーで調整する

画像の読み込み完了後にスクロールを開始する

CSSでは最初に animation-play-state: paused; にしておき、画像がすべて読み込まれたら running に切り替えます。

<script>
  window.addEventListener('load', () => {
    const track = document.querySelector('.scroll-track');
    track.style.animationPlayState = 'running';
  });
</script>

<style>
.scroll-track {
  animation: scroll-left 40s linear infinite;
  animation-play-state: paused; /* 初期は停止 */
}
</style>

表示する画像をランダムに入れ替える

images 配列の中身をランダムにシャッフルし、HTMLに動的に挿入します。2セット分にすることでループ風の見た目もキープできます。

<script>
  const images = [
    'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg',
    'image5.jpg', 'image6.jpg'
  ];

  function shuffle(array) {
    return array.sort(() => Math.random() - 0.5);
  }

  const shuffled = shuffle(images.concat(images)); // 2セット分

  const track = document.querySelector('.scroll-track');
  track.innerHTML = ''; // 初期化

  shuffled.forEach(src => {
    const img = document.createElement('img');
    img.src = src;
    track.appendChild(img);
  });
</script>

以上、HTML＋CSSだけでできる「右から左に流れるスクロールギャラリー」の作り方でした。あなたのサイトにもぜひ取り入れて、視覚的に楽しい演出を加えてみてください！

「良いな」と思ったらシェアしてください！損はさせません

URLをコピーしました！

URLをコピーしました！