2025.5.23｜コーディング

CSSのみ（JavaScript無し）で複数画像や写真を自動で切り替える方法

CSSのみ（JavaScript無し）で複数画像や写真を自動で切り替える方法

ホームページにおいて、視覚的な魅力やユーザーの印象を高めるために、さまざまな演出技術が活用されています。その中でも、複数の画像や写真を自動で切り替えるアニメーションは、動きのあるデザインを取り入れる方法の一つです。

通常、画像の切り替えやスライドショーの機能はJavaScriptを用いて実装されることが多いですが、CSSのみでも簡単な自動切り替えを実現することが可能です。
CSSアニメーションやキーフレーム「keyframes」プロパティを活用することで、外部スクリプトに頼らず、画像を一定の間隔で自動的に切り替える表現を加えることができます。

今回は、CSSのみ（JavaScript無し）で複数画像や写真を自動で切り替える方法を解説します。

本記事の内容

スライドショーとは？

スライドショーとは、複数の画像や写真・コンテンツを一定の間隔で自動的に切り替えて表示する演出のことを指します。主にWebサイトやプレゼンテーション、デジタルサイネージなどで使用され、視覚的なインパクトを与える表現方法の一つです。
スライドショーは従来、JavaScript（特にjQueryやSwiper.jsなどのライブラリ）を使用して実装されてきました。タイミングの制御やアニメーション、インタラクションを伴う場合にはJavaScriptが柔軟に対応できます。
しかし、最近ではCSSのアニメーション機能「keyframes」プロパティや「transition」を活用して、JavaScriptを使わずにシンプルな自動切り替えスライドショーを実現する方法も注目されています。
特に軽量で高速なWebサイトを構築したい場合や、動作を限定的にしたいときには、CSSのみでの実装が有効です。

【スライドショーが使われるシーン】
・トップページのメインビジュアル（ヒーローヘッダー）
・商品やサービスの紹介
・実績・事例のギャラリー表示
・写真ポートフォリオやスライダー広告

スライドショーは、手動で操作できるもの（矢印・サムネイル付き）と、完全自動で画像が切り替わるものの2種類があり、ユーザーの操作性や目的に応じて使い分けられます。
実装にはJavaScript（jQueryやSwiperなどのライブラリ）を用いる方法が一般的ですが、CSSだけでも簡単なスライドショーは実現可能です。
軽量で高速な読み込みを実現したい場合や、アニメーションを最小限にしたいときにCSSスライドショーは有効です。

CSSのみ（JavaScript無し）で複数画像や写真を自動で切り替える方法

複数の画像や写真を自動で切り替えて表示したい場合、一般的にはJavaScriptを使うケースが多いですが、CSSのみで実装することも可能です。
CSSで画像の自動切り替えを実現するには、「keyframes」アニメーションを使用し、画像を一定のタイミングで表示・非表示に切り替えるように設定します。

このとき、画像をまとめて配置したコンテナ要素に対して、アニメーションと「opacity（透明度）」、「position（配置）」などのプロパティを組み合わせることで、スライドショーのような表現をCSSのみで実現できます。CSSだけで構築するこの方法は、外部ライブラリやJavaScriptの知識が不要なため、軽量で高速な表示を目指したい場合や、静的サイトやLP（ランディングページ）に動きを加えたい場面に特におすすめです。
※CSSアニメーションをうまく活用できるようになれば、シンプルな動きや演出を手軽に取り入れることができ、コーディングの幅が大きく広がります。

例
画像のhtmlコード
<div class="slider-container">
<div class="slideimg">
<img src="/img/test01.jpg">
</div>
<div class="slideimg">
<img src="/img/test02.jpg">
</div>
</div>
画像を切り替えるcssコード
/* スライダー全体のスタイル */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
/* 各スライド画像のスタイル */
.slideimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    animation: fadeInOut 6s infinite;
    transition: opacity 1.5s ease-in-out;
}
/* 最初の画像だけ親要素の高さを確保させる */
.slideimg:nth-child(1) {
    position: relative;
    animation-delay: 0s;
}
/* 2枚目の画像のアニメーション遅延 */
.slideimg:nth-child(2) {
    animation-delay: 3s;
}
/* フェードイン・アウトのアニメーション */
@keyframes fadeInOut {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}
/* 画像の表示調整 */
.slideimg img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

まとめ

複数の画像や写真を自動で切り替える演出は、従来であればJavaScriptなどのスクリプトを使って実装するのが一般的でしたが、CSSのアニメーション機能を活用すれば、JavaScriptを使用せずにシンプルな記述だけで実現できます。
特に「@keyframes」や「animation」プロパティを使いこなすことで、軽量かつ読みやすいコードで写真のスライドショーやフェード切り替えなどの動きを加えることができます。
コードのメンテナンスや読みやすさの観点からも、CSSだけで実装できる方法を覚えておくと非常に便利ですね。

«
»

関連記事