【レスポンシブ】PCとスマホで異なる画像を表示させる方法

この間LP制作をした際に、PCとスマホで異なる画像を表示させる機会がありました。

PCとスマホで異なる画像を表示させるコーディングはたまに出てくるので、分からない人は是非マスターしましょう!

【レスポンシブ】PCとスマホで異なる画像を表示させる方法

完成形はこちらです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

PCとスマホで表示される画像が異なっていることが分かるでしょう。

それでは早速コーディングしていきます。

※ Google Chrome、Firefox、Microsoft edge、Safariで動作確認済み

HTML

 

親要素boxの中に、imgとtextのclassを持った子要素を用意しました。

そして、PCの時に表示させたい画像に対して”pc”、スマホの時に表示させたい画像に対して”sp”のclassをつけます。

CSS

こちらがレイアウトのCSSです。

 

そしてPCとスマホで画像を切り替えるためのCSSを書きます。

スマホの時に表示させたい画像は、PCの時は表示させないようにします。

 

最後にスマホの時は、”pc”のclassがついた画像を消し、”sp”のついたclassの画像が表示されるようにします。

 

これでPCとスマホで異なる画像を表示させることが出来ました。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事