株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • レスポンシブ対応|HTMLだけで、PC画像とSP画像を切り替える方法
2023年4月5日
レスポンシブ対応|HTMLだけで、PC画像とSP画像を切り替える方法

PC画像とSP画像のデザインが変わる際、CSSのメディアクエリで切り替えたりJavaScriptを使用して切り替える方法もありますが、今回はHTMLのpictureタグを使用して簡単に画像の切り替えができる方法を紹介します。

pictureタグを使用するメリット

画面幅によって、表示する画像を切り替えることができる
ブラウザが対応していない画像(webpなど)を、別の画像に切り替えて表示してくれる
画像を切り替えることでRetinaディスプレイ対応ができる

イメージはこちら

設定は簡単です。切り替えのコードは以下になります。

<picture>
  <source srcset="画像のパス" media="ブレイクポイント指定">
  <img src="上記の条件以外の画像のパス" alt="">
</picture>

例として、幅1000px以上で画像を切り替えたい場合

<picture>
  <source srcset="https://autoproject.nagoya/wp-content/uploads/test_2-scaled.jpg" media="(min-width: 1000px)">
  <img src="https://autoproject.nagoya/wp-content/uploads/test_1-scaled.jpg" alt="">
</picture>
※画像の大きさの設定などはCSSで調整してください。

上記のように記述すれば、1000px以上(PC指定)の時は、test_2-scaled.jpgの画像が表示されて、それ以外(SP指定 1000px以下)の時は、test_1-scaled.jpgを表示してくれます。

切り替え画像が複数ある場合

PC、SPだけではなく、タブレットでも切り替えをしたい場合、画像を複数設定することもできます。

設定は、sourceタグを追加するのみです。

<picture>
 上から順番に読み込む
  <source srcset=".https://autoproject.nagoya/wp-content/uploads/test_2-scaled.jpg" media="(min-width: 1000px)">pc-
  <source srcset="https://autoproject.nagoya/wp-content/uploads/test_3-scaled.jpg" media="(min-width: 768px)">タブレット
   
  上記の条件にあてはまらない場合imgタグを読み込む


  <img src="https://autoproject.nagoya/wp-content/uploads/test_1-scaled.jpg" alt="">その他(sp
</picture>-

pictureタグの特徴はsourceタグを上から順番に読んでいくので、条件が合う画像を読み込んでくれます。最後、どれも条件に当てはまらない場合はimgタグを読み込みます。そのため、最後にimgタグは必ず設定してください。

次回は、webp画像の設定方法や、Retinaディスプレイ対応の方法を紹介します。

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする