grandstream blog

code

【レスポンシブ】スマホとPCで画像を出し分ける方法！【コピペで一発】

公開日 2021/5/29 2459 Views

こんにちは、grandstreamです。

今回は、Web制作のレスポンシブ化において、スマホとPCで異なる画像を使用したいなと思ったときに使えるコードをご紹介します。

Contents

1 スマホとPCで画像を出し分ける方法
2 まとめ

スマホとPCで画像を出し分ける方法

ずばり、imgタグの部分を以下のコードに書き換えればOKです。

imgタグ内にはPC版で使いたい画像を指定し、sourceタグ内ではスマホ版で使いたい画像を指定してください。

で、ブレイクポイントは任意の値に変更してください。

上記の例だと、画面の横幅が767px以下のときは、sourceで指定した画像が表示されるようになります。

もっと詳しい使い方が知りたい方は、下記のサイトを参考にしてみるといいでしょう。

https://code-kitchen.dev/html/picture/

まとめ

意外と、コーディングをやっていて、スマホとPCで異なる画像を使いたいって思うことがあるので、そういうときにもってこいですね。

ぜひ使ってみてください。

ではまた。

grandstreamに支援を送る

タグ