【保存版】レスポンシブで2枚のimg切替をCSSのみで行う2つの方法

レスポンシブ対応ページは本来であれば1枚の画像が望ましいですが、どうしてもPCとスマホで画像を切り替えたい場合に使う方法を2つ説明します。

background方式

backgroundとして画面が大きいときはPC用画像を読み込み、画面が小さい時はスマホ用画像を読み込むCSSを切り替える方法。

<div class="imagebox"></div>

<style>
.imagebox{
background:url(sp.jpg);
}
@media only screen and (min-width:670px){
.imagebox{
background:url(pc.jpg);
}
}
</style>

display:none方式

画面が大きいときはPC用画像を読み込み、スマホ用画像を消す、画面が小さい時はスマホ用画像を読み込み、PC用画像を消すCSSを記述する方法。

<img class="pc" src="pc.jpg" />
<img class="sp" src="sp.jpg" />

<style>
/*スマホの場合*/
@media only screen and (max-width:670px){
img.pc{
display:none
}
}
/*PCの場合*/
@media only screen and (min-width:670px){
img.sp{
display:none
}
}
</style>