BLOG / ブログ

レスポンシブに対応した画像の切り替えを初心者向けに簡単にわかりやすく書きました。

株式会社トラフィックラボ

【コピペでOK】レスポンシブ対応!画像の切り替え

  • BLOG

レスポンシブ対応!画像の切り替え

初めまして!
見習いコーダーのSACHIです!

今回はレスポンシブ対応の画面のサイズに合わせた画像の切り替えの仕方をやっていきたいと思います!
ポイントは、イメージの横幅を指定してあげることと、display要素の切り替えになっていきます。
まず今回はPC用の画像とスマホ用の画像を2種類用意しました!

【PC用画像】
img1.png (1280px×1080px)

PC画面イメージ画像

【スマホ用画像】
img2.png (640px×1136px}

スマホ画面のイメージ画像

まずは、HTMLを記述していきましょう!

【HTML】

<div class="pc_img"><img src="img/img1.png"></div>
<div class="sp_img"><img src="img/img2.png"></div>

ブラウザで確認すると縦に2つの画像が縦並びに表示されます。↓↓↓
縦並びになった2つの画像

imgに横と縦の指定をしていきましょう。

【CSS】

img {
width: auto;
max-width: 100%;
height: auto;
}

それでは、CSSでPCの画像をdisplay:inline-block;、スマホの画像にはdisplay:none;をつけて非表示にしましょう。

【CSS】

.pc_img img{
display:inline-block;/*PC画像を表示する*/
}

.sp_img img{
display:none;/*スマホ画像は非表示にする*/
}

そうすると、スマホ画面が見えなくなります!

スマホ画面が消えた画像

無事PC画面でスマホ画像が表示されなくなりました。

次に両方のimgにメディアクエリを使い、640pxを境にして画像を切り替えるCSS記述をしていきたいと思います!
PC画像にはdisplay:none;、スマホ画像にはdisplay:inline-block;です。

.pc_img img{
display:inline-block;/*PC画像を表示する*/
}

.sp_img img{
display:none;/*スマホ画像は非表示にする*/
}

@media screen and (max-width: 640px) {
.pc_img img {
display: none;/*PC画像は非表示する*/
}

.sp_img img {
display:inline-block;/*スマホ画像を表示する*/
}

}

まずは、PC画面のサイズで確認しましょう。

PC画面確認画像

ちゃんと表示されていますね!
では、スマートフォンで確認してみましょう!

スマホ画面確認画像

バッチリ切り替わりましたね!
記述も簡単なのでぜひ試してみてください。