複数画像を切り替えるフェードスライダーの作り方｜CSSアニメーション（JavaScript不要）

トップページにスライダーを置くと、ファーストビューが一気に引き締まりサイトの印象を大きく高められます。なかでも、CSSで作るスライダーはJavaScript不要で軽く、表示速度を落とさないのが大きな魅力。

HTMLとCSS だけで作れるため、テーマを選ばず導入できます。

この記事では、当サイトのトップページでも実際に使用しているフェードスライダーの仕組みを初心者でも理解しやすい形で解説します。

基本的な考え方を先に紹介し、具体的なHTML／CSSの完成コードや実装手順は後半の有料パートで詳しくまとめています。

CSSだけで作れるフェードスライダーとは？

複数の画像がフェードイン・フェードアウトして順番に切り替わるスライドショーです。通常はJavaScriptが必要ですが、CSSだけでも軽量に実現できます。

特徴

• スクリプト不要で軽量
  ブラウザが直接CSSアニメーションで処理するため、表示が速くサクサク動きます。
• 自然なフェード切り替え
  画像が滑らかに切り替わるため、見た目が優しく、サイト全体の印象がアップします。
• コピペで簡単に導入可能
  HTMLに画像を並べてCSSを追加するだけで、すぐに動くスライダーを作れます。

• こんな場面に最適

• トップページのメインビジュアル
• ランディングページや商品紹介ページ

特に「軽くてシンプルなスライドを入れたい」場合に最適です。

動きのイメージ

以下は、CSSだけで作れるシンプルなフェードスライダーのDEMOです。

• 例：3枚の画像が3秒ごとに順番に切り替わる
• 仕組み：同じ位置に画像を重ねて透明度とタイミングを変化させるだけ

非常に軽量で、ページ表示も速いのが特徴です。

仕組みの基本

CSSだけで画像を切り替えるスライダーは、主に @keyframes と animation で動きを作ります。

• @keyframes：時間ごとの動きの設計図
• animation：設計図を画像に適用して動かす

複数枚の画像は、表示開始のタイミングをずらすことで順番に切り替わります。

※具体的な秒数やコピペで使える完成コードは、有料パートで解説しています。

トップページでの活用ポイント｜メインビジュアルとして魅せるコツ

フェードスライダーをメインビジュアルに使う場合、効果的に見せるための基本をまとめました。

• フルワイドで表示する
  画面いっぱいに広げると、強いインパクトが出ます。
• 余計な要素を消す
  スライダー周りのアイキャッチやSNSボタンは非表示にしてスッキリ見せます。
• 余白を最小限にする
  画像が広く見え、迫力が出ます。
• 中央にコンテンツを置く
  ロゴ・キャッチコピー・ボタンなどは中央寄せがもっとも見やすく、伝わりやすい配置です。

▼ 参考記事

• Cocoonで全幅（フルワイド）デザインにする方法

• CSSで中央寄せする方法まとめ

• Cocoonで作るサイト型トップページ（デモあり）

実装方法｜CSSだけで複数画像を切り替えるスライダー

CSSだけで複数画像を切り替えるスライダーを作るには、HTMLとCSSの組み合わせが基本です。

WordPressへの設置方法や、Cocoonテーマでのカスタマイズの基礎は別記事で紹介していますので、そちらもあわせてご確認ください。

HTMLの基本構造

スライダーは、コンテナ + 画像要素のシンプルな構造で作ります。

表示したい画像の数だけ .slideimg を用意し、CSSで背景画像を指定します。

<div class="slider-container">
  <div class="slideimg"></div>
  <div class="slideimg"></div>
  <div class="slideimg"></div>
</div>

※画像の枚数を増やすと、スライドで表示する枚数も増やせます。

---

ここから先は有料公開です。この先では、すぐに使える完成版CSSコードとアニメーションのタイミング調整のコツを詳しく解説しています。

CSSアニメーションの基本を理解しておくと、さらに応用も可能です。

サイトに動きを加え、印象をグッとアップさせたい方はぜひ続きをご覧ください。