MENU
学習猫
PR

【CSSだけ、コピペOK】PCとスマホで、画像・バナーを出し分けする方法

にゃん花子
記事内に商品プロモーションを含む場合があります

PCとスマホで、画像やバナーを出しわけるにゃん。CSSで完結。

CSSのメディアクエリを使って、PCとSPで画像を出しわけます。

目次
  1. 基本の切り替えCSSのコード（コピペOK）
    1. contentを使用してCSSで画像を出し分けるソース
    2. HTMLで画像URLを指定する方法
  2. 高解像度の画像を指定する場合のCSS
    1. srcset属性を使用する方法
    2. image-set()関数をCSSで使用する方法
    3. srcset属性とimage-set()関数を組み合わせて使用する場合
Google広告

基本の切り替えCSSのコード（コピペOK）

contentを使用してCSSで画像を出し分けるソース

HTML部分:

  • <img>タグにclass="responsive-image"を設定しています。
  • src属性は指定せず、CSSのcontentプロパティで画像を制御します。

CSS部分:

  • .responsive-imageクラスに基本的なスタイルを設定しています。
  • デフォルト（PC用）の画像をcontent: urlで指定しています。
  • メディアクエリを使用して、画面幅が767px以下の場合（スマートフォンサイズ）に別の画像を表示するようにしています。
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>レスポンシブ画像の例</title>
7    <style>
8        .responsive-image {
9            width: 100%;
10            max-width: 800px;
11            height: auto;
12        }
13
14        /* デフォルト（PC用）の画像 */
15        .responsive-image {
16            content: url("PC用の画像URL");
17        }
18
19        /* スマホ用の画像 */
20        @media screen and (max-width: 767px) {
21            .responsive-image {
22                content: url("SP用の画像URL");
23            }
24        }
25    </style>
26</head>
27<body>
28    <h1>レスポンシブ画像の例</h1>
29    <img class="responsive-image" alt="レスポンシブ画像">
30</body>
31</html>

メディアクエリのブレイクポイント（この例では767px）は、ご要望に応じて調整可能です。また、必要に応じて複数のブレイクポイントを設定し、タブレット用の画像なども追加できます。

このコードを使用することで、デスクトップPCでは大きな画像が、スマートフォンでは小さな画像が表示されるようになります。これにより、モバイルデバイスでのパフォーマンスを向上させつつ、デスクトップでは高品質な画像を提供することができます。

HTMLで画像URLを指定する方法

  1. HTML部分:
    • 2つの<img>タグを用意し、それぞれにPC用とスマートフォン用のクラスを付与しています。
    • 各画像に直接src属性でURLを指定しています（この例ではプレースホルダーを使用）。
  2. CSS部分:
    • .pc-imageと.sp-imageに対して、初期状態での表示・非表示を設定しています。
    • メディアクエリを使用して、画面幅が767px以下の場合に表示する画像を切り替えています。
    • display: block;とdisplay: none;を使用して、適切な画像を表示・非表示にしています。
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>レスポンシブ画像の表示切替例</title>
7    <style>
8        .image-container {
9            max-width: 100%;
10        }
11        
12        .pc-image, .sp-image {
13            width: 100%;
14            height: auto;
15        }
16        
17        /* デフォルト：PC用画像を表示、SP用画像を非表示 */
18        .pc-image {
19            display: block;
20        }
21        .sp-image {
22            display: none;
23        }
24        
25        /* スマートフォン向け：SP用画像を表示、PC用画像を非表示 */
26        @media screen and (max-width: 767px) {
27            .pc-image {
28                display: none;
29            }
30            .sp-image {
31                display: block;
32            }
33        }
34    </style>
35</head>
36<body>
37    <h1>レスポンシブ画像の表示切替例</h1>
38    <div class="image-container">
39        <img class="pc-image" src="PC用の画像URL" alt="PC用画像">
40        <img class="sp-image" src="SP用の画像URL" alt="スマートフォン用画像">
41    </div>
42</body>
43</html>

HTMLで直接画像を指定するため、画像の管理が容易です。
異なるデバイス向けに完全に別の画像を用意できます（例：アスペクト比や内容が異なる画像）。

高解像度の画像を指定する場合のCSS

近年、スマホではPCよりもより高解像度の画像を求められることも多々あります。そのため、上記のパターンに + モバイル用に2倍サイズ（高解像度）の画像を指定する場合のCSS
記載についても、ご紹介しておきます！

「spで表示すると画像がぼやけて見えるなぁ」という場合は、高解像度の画像に差し替えてみましょう！

srcset属性を使用する方法

  1. <img>タグにsrcset属性を使用しています。
  2. srcset属性内で、異なる解像度（1x, 2x, 3x）に対応する画像を指定しています。
  3. src属性はフォールバック用として、最も低解像度の画像を指定しています。

ブラウザは、デバイスの画面解像度に基づいて適切な画像を選択します。例えば、Retinaディスプレイ（2x）では、800×600の画像が選択されます。

※/api/placeholder/幅/高さは実際の画像URLに置き換えてください。

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>srcset属性を使用した高解像度対応の画像例</title>
7    <style>
8        .responsive-image {
9            max-width: 100%;
10            height: auto;
11        }
12    </style>
13</head>
14<body>
15    <h1>srcset属性を使用した高解像度対応の画像例</h1>
16    <img class="responsive-image"
17         src="/api/placeholder/400/300"
18         srcset="/api/placeholder/400/300 1x,
19                 /api/placeholder/800/600 2x,
20                 /api/placeholder/1200/900 3x"
21         alt="レスポンシブ画像">
22</body>
23</html>

image-set()関数をCSSで使用する方法

  1. CSSのbackground-imageプロパティにimage-set()関数を使用しています。
  2. 異なる解像度（1x, 2x, 3x）に対応する画像を指定しています。
  3. ブラウザの互換性のため、-webkit-プレフィックス付きのバージョンも含めています。
  4. フォールバック用として、通常のbackground-imageも指定しています。

image-set()関数を使用することで、ブラウザはデバイスの画面解像度に基づいて適切な背景画像を選択します。

※/api/placeholder/幅/高さは実際の画像URLに置き換えてください。

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>image-set()関数を使用した高解像度対応のCSS例</title>
7    <style>
8        .responsive-background {
9            width: 400px;
10            height: 300px;
11            background-image: url("/api/placeholder/400/300");
12            background-image: -webkit-image-set(
13                url("/api/placeholder/400/300") 1x,
14                url("/api/placeholder/800/600") 2x,
15                url("/api/placeholder/1200/900") 3x
16            );
17            background-image: image-set(
18                url("/api/placeholder/400/300") 1x,
19                url("/api/placeholder/800/600") 2x,
20                url("/api/placeholder/1200/900") 3x
21            );
22            background-size: cover;
23            background-repeat: no-repeat;
24        }
25    </style>
26</head>
27<body>
28    <h1>image-set()関数を使用した高解像度対応のCSS例</h1>
29    <div class="responsive-background"></div>
30</body>
31</html>

srcset属性とimage-set()関数を組み合わせて使用する場合

上記2つの方法は組み合わせて使用することはできます。というのも、image-set()関数は比較的新しい機能なので、古いブラウザではサポートされていない可能性があります。

この方法を使うことで、高解像度のスマートフォンディスプレイでも鮮明な画像を表示することができます。通常のディスプレイでは標準解像度の画像が、高解像度ディスプレイでは2倍サイズの画像が表示されます。

※/api/placeholder/幅/高さは実際の画像URLに置き換えてください。

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>高解像度対応のレスポンシブ画像例</title>
7    <style>
8        .image-container {
9            max-width: 100%;
10        }
11        
12        .pc-image, .sp-image {
13            width: 100%;
14            height: auto;
15        }
16        
17        /* デフォルト：PC用画像を表示、SP用画像を非表示 */
18        .pc-image {
19            display: block;
20        }
21        .sp-image {
22            display: none;
23        }
24        
25        /* スマートフォン向け：SP用画像を表示、PC用画像を非表示 */
26        @media screen and (max-width: 767px) {
27            .pc-image {
28                display: none;
29            }
30            .sp-image {
31                display: block;
32            }
33        }
34
35        /* 高解像度ディスプレイ用のCSS（image-set関数を使用） */
36        @media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), 
37               screen and (max-width: 767px) and (min-resolution: 192dpi) {
38            .sp-image {
39                content: -webkit-image-set(
40                    url("/api/placeholder/400/300") 1x,
41                    url("/api/placeholder/800/600") 2x
42                );
43                content: image-set(
44                    url("/api/placeholder/400/300") 1x,
45                    url("/api/placeholder/800/600") 2x
46                );
47            }
48        }
49    </style>
50</head>
51<body>
52    <h1>高解像度対応のレスポンシブ画像例</h1>
53    <div class="image-container">
54        <img class="pc-image" src="/api/placeholder/1200/900" alt="PC用画像">
55        <img class="sp-image" 
56             src="/api/placeholder/400/300"
57             srcset="/api/placeholder/400/300 1x, /api/placeholder/800/600 2x"
58             alt="スマートフォン用画像">
59    </div>
60</body>
61</html>
Google広告
ABOUT ME
にゃん花子
にゃん花子
Instagram
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め｜文系から独学でWeb屋さんになった人｜インフラ分野のわかるWebディレクター｜主にWordpressのサイト立ち上げ、リプレイス、運用をしています｜Shopifyもはじめました | アニメ・映画・ドラマを聴きながら、ブツブツ呟きながら、制作するのが好きです | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中｜小学１年生の壁に負けじと２０２４年も奮闘します
Google広告
Google検索
Recommend
こちらの記事もどうぞ
記事URLをコピーしました