code
【レスポンシブ】スマホとPCで画像を出し分ける方法！【コピペで一発】
こんにちは、grandstreamです。
今回は、Web制作のレスポンシブ化において、スマホとPCで異なる画像を使用したいなと思ったときに使えるコードをご紹介します。
Contents
スマホとPCで画像を出し分ける方法
ずばり、imgタグの部分を以下のコードに書き換えればOKです。
imgタグ内にはPC版で使いたい画像を指定し、sourceタグ内ではスマホ版で使いたい画像を指定してください。
で、ブレイクポイントは任意の値に変更してください。
上記の例だと、画面の横幅が767px以下のときは、sourceで指定した画像が表示されるようになります。
もっと詳しい使い方が知りたい方は、下記のサイトを参考にしてみるといいでしょう。
https://code-kitchen.dev/html/picture/
まとめ
意外と、コーディングをやっていて、スマホとPCで異なる画像を使いたいって思うことがあるので、そういうときにもってこいですね。
ぜひ使ってみてください。
ではまた。
grandstreamに支援を送る
タグ
【初心者向け】ローカルファイルをGitHubにアップロードする方法【GitHub】
【英語表現】「tic-tac-toe」の意味とは？例文と語源もご紹介！
【英語表現】「in (the) light of」の意味とは？ネイティブの使用例と語源をご紹介！
【英語表現】「on the flip side」の意味とは？ネイティブの使用例と語源をご紹介！
【英語表現】「in due course」の意味とは？ネイティブの使用例と語源をご紹介！
【英語表現】「nitty-gritty」の意味とは？例文と語源もご紹介！
【英語表現】「off the hook」の意味とは？ネイティブの使用例と語源をご紹介！
【英語表現】「leeway」の意味とは？ネイティブの使用例と語源をご紹介！
【英語表現】「voila」の意味とは？ネイティブの使用例と語源をご紹介！
【英語表現】「icing on the cake」の意味とは？ネイティブの使用例と語源をご紹介！
