PCとスマホで別画像に切り替えて表示したい(HTML/CSSコード例)

PCとスマホでそれぞれ別々の画像に切り替えて表示したい!というケースに遭遇しましたか?
方法はいくつかありますが、今回は初心者向けに2つの書き方をご紹介します。

目次

方法1:HTMLとCSSでレスポンシブ

<img class="img-pc" src="img/pcimg.png" alt="PC用画像">
<img class="img-sp" src="img/spimg.png" alt="スマホ用画像">

(PCのデザインからコーディングをして、後ほどスマートフォン対応のCSSを書いていると想定)

.img-sp {
    display: none;
}

@media screen and (max-width:560px) {
    .img-pc {
        display: none;
    }

    .img-sp {
        display: block;
    }
}
講師

この方法は理解しやすいかもしれないけれど、
実はもうちょっとプロ仕様な実装方法があるよ

方法2:HTMLでpicture要素を使う(推奨)

<picture>
  <source media="(max-width: 560px)" srcset="img/spimg.png">
  <source media="(max-width: 960px)" srcset="img/mdimg.png">
  <img src="img/pcimg.png" alt="画像">
</picture>
講師

560pxまでは「spimg.png」
960pxまでは「mdimg.png」
961px以上の場合は「pcimg.png」 の画像が表示されるというコードです。

うまくいきましたか?
今回は560px、960pxをブレイクポイントに設定していますが、ご自身の設定しているものに合わせるようにしましょう。

Advertising

Photoshop以外も契約したいけど、高くて躊躇していませんか?
Adobe Creative Cloudを一番安く購入する方法 →1年:39,980円の詳細を見る


世界最大級のオンライン学習サイトUdemy  ※UdemyはよくSALEをしていますので、ひんぱんにチェックして、Webデザイン講座の動画をお得にGETしてくださいね♡2000〜3000円くらいで買えることも。


ロイヤリティフリーの写真素材【PIXTA】 ※画像素材は定額制プランのあるサイトを選ぶのがオススメです。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる