CSSメディアクエリでレスポンシブバナー実装｜完全ガイド

2024年7月23日

この記事の結論

PCとスマホでバナー画像を切り替えるレスポンシブ対応は、CSSメディアクエリで実装できます。PC用とSP用の画像を用意し、@media screen and (max-width: 767px)などで画面幅に応じてdisplay: block;とdisplay: none;を切り替えることで、デバイスごとに最適な画像を表示できます。ほかにsrcset属性やpicture要素を使う方法もあり、画像圧縮や遅延読み込み、WebPなど次世代フォーマットの活用でパフォーマンスも向上します。

生徒

ペン博士！この前Webサイトを作ったんですけど、スマホで見るとバナーがすごく小さくなってしまって…。PCとスマホで表示を切り替えるにはどうすればいいんですか？

ペン博士

うむ、それは良い疑問じゃな。Webデザインでは画面サイズごとに最適化する工夫が欠かせん。そのために使うのがCSSメディアクエリじゃよ。実装コードを例にして、スマホ・PCと画面サイズに合わせて出し分ける方法を解説していこう。

生徒

ありがとうございます！お願いします！

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

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

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

中田さん
都内の企業で10年働くも、金銭面・働き方に不満を持ち、副業や転職を考えるようになる。「在宅で稼げるようになりたい」とフリーランスになることを決意。短期集中でプログラミング学習にフルコミットした結果、復職後3ヶ月で退社→フリーランスとして活動を開始する。現在は、子育てに参加しながら、在宅で案件をこなし収入を得られるようになる。

詳しくはこちらの記事をご覧ください。

なぜレスポンシブバナー対応が必須なのか？

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

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

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

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

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

CSSメディアクエリを使った実装方法5ステップ

ペン博士

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

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;
  }
}

解説

1. デフォルト設定（PC向け）

.banner-pc { display: block; }: PC用画像を表示します。
.banner-sp { display: none; }: SP用画像を非表示にします。

2. スマートフォン向けの設定

@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が適用される仕組みとなっています。

バナー表示を最適化する3つのパフォーマンス対策

ペン博士

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

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

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

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

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

生徒

なるほど！メディアクエリを使えば、スマホやPCごとにバナーを切り替えられるんですね！これで見やすさがグッと上がりそうです！

ペン博士

うむ、その通りじゃ。ポイントは 画面サイズを意識した設計 と、どのサイズをターゲットにするかを最初に決めておくことじゃよ。そうすれば効率的にデザインを作れる。しっかり活用して、より質の高いWebサイトを作っていくのじゃぞ！

生徒

はい！これでユーザーにとって快適な表示を意識して作っていけそうです！ありがとうございました！

まとめ：画面サイズ対応で離脱率を削減

レスポンシブ対応の画像実装は、Webサイトのパフォーマンスとユーザー体験を大きく向上させます。プロジェクトの要件に応じて最適な方法を以下から選択することが重要です。

・CSSメディアクエリ
・srcset属性
・picture要素など

適切なレスポンシブ画像対応を行うことで、モバイルフレンドリーなサイト作りができ、SEO面でも有利になります。デバイスの最新版が出るなど変化が起きやすい部分ではあるので、常に最新のWeb標準に注目し、効果的なレスポンシブデザインを実現しましょう。

参考リンク（公式・一次情報）

Google 検索セントラル（SEOスターターガイド）

よくある質問（FAQ）

Q1. CSSメディアクエリでバナーを切り替える方法は？

A. PC用とSP用の2つのimg要素を用意し、それぞれにクラスを付与して両方をHTMLに配置します。CSSでデフォルトはPC用を表示・SP用を非表示にし、@media screen and (max-width: 767px)の中でPC用を非表示・SP用を表示に切り替えます。これで画面幅768px以上ならPC用、767px以下ならSP用が表示されます。

Q2. メディアクエリとは何ですか？

A. メディアクエリは、画面幅などデバイスの条件に応じて適用するCSSを定義する仕組みです。たとえば@media screen and (max-width: 767px)と書くと、画面幅が767px以下の場合にのみ適用されるスタイルを定義できます。これによりデバイスごとに最適なレイアウトを実現できます。

Q3. srcset属性やpicture要素との違いは何ですか？

A. srcset属性を使うと、ブラウザがデバイスの画面幅に応じて適切な画像を自動選択します。picture要素はsource要素で条件を細かく指定でき、480pxまではSP用、768pxまではタブレット用、それ以上はPC用といった制御が可能です。より細かい制御が必要な場合はpicture要素が適しています。