MENU
新型コロナウイルス感染症(COVID-19)対策のため、教室ではマンツーマンレッスンのみを受付。※オンライン講座は随時受け付けております。

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

2020 6/21
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: 960px)" srcset="img/mdimg.png">
  <source media="(max-width: 560px)" srcset="img/spimg.png">
  <img src="img/pcimg.png" alt="画像">
</picture>

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

この記事を書いた人

[経験]
・制作(Photoshop・Illustrator/HTML・CSS・jQuery・WordPress)
・アクセス解析/SEOライティング/運用改善/企画提案
・講師(職業訓練校/スクール/企業出向)
[活動]
大阪・東京でWeb制作を中心に活動。
また「拡げるキッカケを共創する」を活動指針として
①未来を切り開くスキル習得サポート、②自立したウェブサイト運用のアシスト、を行う。

目次
閉じる