【スマホ対応】HTML＋CSSだけで画像切り替えアニメーションを実装する方法

画像がゆっくりと切り替わるアニメーションは、ブログやポートフォリオにおいて視覚的に魅力を高める要素のひとつです。

しかし、パソコンではうまく表示されるのに、スマホで見ると画像が見切れてしまう……そんな悩みを抱える方も多いのではないでしょうか？

今回は、WordPressの記事内で使える画像切り替えアニメーションを、スマホ対応（レスポンシブ対応）で実装する方法をご紹介します。

実装したい内容

HTMLとCSSだけで実装（JavaScript不要）
画像がふわっと切り替わるアニメーション
スマホでも画像が見切れず、キレイに表示される

INDEX

行ったこと
スマホ対応版のコード（WordPress用）
画像切り替えの動作イメージ
古いブラウザの対応は？
応用アイデア
まとめ

行ったこと

こちらを参考にさせてもらいました。参考サイトを基に少しアレンジしてみました。

スマホ対応版のコード（WordPress用）

以下は、WordPressの記事に直接貼り付けて使えるコードです。画像は2枚を例としていますが、何枚でも応用可能です。

HTMLコード

<!-- HTML -->
<div class="testBox">
  <img src="test1.png" alt="Image 1" class="item1">
  <img src="test2.png" alt="Image 2" class="item1">
</div>

CSSコード

<!-- CSS（style タグ内に記述）-->
<style>
.testBox {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;  /* 高さを自動で調整（レスポンシブ対応） */
  overflow: hidden;
}

.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  animation: anime 10s infinite;
}

.item1:nth-of-type(2) {
  animation-delay: 5s;
}

/* フェードアニメーション */
@keyframes anime {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
</style>

解説ポイント

aspect-ratio で自動高さ調整

height: 400px などと高さを固定してしまうと、スマホでは画面が狭くなるため見切れやすくなります。

aspect-ratio: 16 / 9;

上記を使うことで、画面幅に応じて高さを自動計算してくれるため、スマホ・タブレット・PCすべてで美しい比率が保たれます。

object-fit: cover で画像を綺麗に表示

/* img */
.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; //←ココ
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 10s infinite;
  animation: anime 10s infinite;
}

画像のアスペクト比が異なる場合でも、枠内にぴったりフィットさせて表示してくれるのが object-fit: cover の特徴です。

画像切り替えの動作イメージ

この実装では以下のように動作します：

1枚目の画像が表示される（5秒間）
徐々に2枚目へフェードイン（次の5秒間）
繰り返し

アニメーションの切り替え時間や順番は自由に調整できます。

古いブラウザの対応は？

aspect-ratio はモダンブラウザ（Chrome, Firefox, Edge, Safariなど）でサポートされています。古い環境に対応したい場合は、以下のように padding-top による高さ調整を使った代替コードを用意することも可能です。

.testBox {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9の比率 */
}

応用アイデア

この画像切り替えアニメーションは、以下のような活用が可能です。

トップページのヒーロー画像として使用
商品やポートフォリオの紹介
アイキャッチ画像の装飾

まとめ

項目	内容
利用技術	HTML + CSS（JavaScript不要）
スマホ対応	`aspect-ratio` による自動調整
表示切替	フェードアニメーションで自然な切り替え

WordPressの記事や固定ページにもそのまま使える実用的なコードなので、ぜひコピーしてご自身のサイトに取り入れてみてください！

おすすめ書籍