画面サイズに応じたバナー表示：CSSメディアクエリを活用した実装手順を解説

2024年7月23日

Webデザインにおいて、レスポンシブ対応は不可欠です。特に画像のレスポンシブ対応は、サイトのパフォーマンスと見た目の両方に大きく影響します。

本記事では、画像のレスポンシブ対応に焦点を当て、デバイスごとに最適化された画像を表示する方法を詳しく解説します。

レスポンシブ対応の重要性

レスポンシブデザインとは、WebページがPC、スマートフォン、タブレットなど異なるデバイスの画面サイズに応じて、自動的に最適なレイアウトに変わるデザイン手法です。レスポンシブ対応をすることで以下のメリットが挙げられます。

ユーザー体験の向上
デバイスに適した画像を表示することで、閲覧体験が向上します。

ページ読み込み速度の最適化
適切なサイズの画像を使用することで、不要なデータ転送を減らし、ページの読み込み速度を向上させます。

SEO対策
Googleはモバイルフレンドリーなサイトを高く評価するため、レスポンシブ対応は検索順位の向上にもつながります。

レスポンシブデザインについては、こちらの記事で詳しく解説しています。

実装方法

レスポンシブデザインを意識し、デバイスごとに適切な画像を配置することにより、より見やすい画面表示を実現することができます。ここでは、その方法を解説していきます。

1. CSSメディアクエリを使用した方法

この方法は、PC（パソコン）とSP（スマートフォン）用の異なる画像を用意し、CSSで切り替える方法です。

HTML構造

<div class="banner">
  <img src="banner-pc.jpg" alt="PC用バナー" class="banner-pc">
  <img src="banner-sp.jpg" alt="SP用バナー" class="banner-sp">
</div>

解説

2つの<img>要素を用意し、それぞれにPC用とSP用のクラスを付与します。
両方の画像を常にHTMLに配置しておき、CSSで表示/非表示を制御します。

CSS実装

/* 共通スタイル */
.banner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.banner img {
  width: 100%;
  height: auto;
}

/* デフォルトでPC用画像を表示、SP用画像を非表示 */
.banner-pc {
  display: block;
}

.banner-sp {
  display: none;
}

/* スマートフォン向けのスタイル */
@media screen and (max-width: 767px) {
  .banner-pc {
    display: none;
  }

  .banner-sp {
    display: block;
  }
}

解説

デフォルト設定（PC向け）
- .banner-pc { display: block; }: PC用画像を表示します。
- .banner-sp { display: none; }: SP用画像を非表示にします。
スマートフォン向けの設定
- @media screen and (max-width: 767px) { ... }: 画面幅が767px以下の場合に適用されるスタイルを定義します。このような、デバイスごとのCSS定義をメディアクエリと言います。
- .banner-pc { display: none; }: PC用画像を非表示にします。
- .banner-sp { display: block; }: SP用画像を表示します。

この実装により、以下の動作が実現できます。

画面幅が768px以上の場合、PC用の画像のみが表示されます。

画面幅が767px以下の場合、SP用の画像のみが表示されます。

2. srcset属性を使用した方法

srcset属性を使用すると、ブラウザが適切な画像を選択できるようになります。

<img src="banner-default.jpg" 
     srcset="banner-sp.jpg 480w, banner-tablet.jpg 768w, banner-pc.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
     alt="レスポンシブバナー">

srcset: デバイスの画面幅に応じて使用する画像を指定します。
sizes: 画面サイズに応じて、画像がどのくらいの幅で表示されるかを指定します。

3. picture要素を使用した方法

picture要素を使用すると、より細かい制御が可能になります。

<picture>
  <source media="(max-width: 480px)" srcset="banner-sp.jpg">
  <source media="(max-width: 768px)" srcset="banner-tablet.jpg">
  <img src="banner-pc.jpg" alt="レスポンシブバナー">
</picture>

この方法では、指定した条件に合致する最初のsource要素の画像が使用されます。上記では、表示部分が480pxまではbanner-sp.jpgが、768pxまではbanner-tablet.jpgが、それ以上の大きさの場合は、banner-pc.jpgが適用される仕組みとなっています。

パフォーマンス最適化のヒント

画像の読み込み数が増えると、それに伴い表示時間が遅延したりと、パフォーマンスが落ちてしまうことがあります。その場合の対策としては、以下の方法が挙げられます。

画像の圧縮
各デバイス用に最適化された画像を用意し、不要なデータを削減します。

遅延読み込み
画面外の画像は遅延読み込みを使用し、初期読み込み時間を短縮します。

次世代フォーマットの使用
WebP（2010年にGoogleが開発した新型の画像ファイル形式）などの次世代画像フォーマットを使用し、ファイルサイズを削減します。

これらの方法を活かすことで、読み込み速度を上げることが可能になり、より高いユーザ体験を実現できるでしょう。