ウィンドウサイズによって違うイメージ画像をCSSで切り替える

レスポンシブに対応できる小技として、PCなどの大きなウィンドウサイズで見た場合と、スマホなどの小さなデバイスで見た場合で表示する画像イメージを切り替える方法を試していきたいと思います。（※ここで基準となるブレイクポイントを640pxとしておきます。）

わざわざ画像をそれぞれに用意しなければならないというデメリットのある方法ですが、同じ画像イメージを使う場合、画像内に記載されているテキストが小さくて見えない状況などもあるかと思います。そういった場合の回避方法のひとつとして知っておくのも良いかと思います。

そのやり方を簡単に説明すると、「スマホ版では、画像イメージを<img>要素により表示させ、PC版では画像イメージを非表示にしてCSSにより背景画像を表示させる」ということになります。

 

1. 正方形の画像から横長方形の画像に切り替える
2. 横並びの4つの画像を2×2に切り替える
3. 横並びの4つの画像を立て並び4段の画像に切り替える

 

デモサンプル

ウィンドウサイズを狭めたり広げたりしてご確認ください。

1.HTMLを記述

2.CSSを記述

 ナビゲーションの画像などを、ディスプレイサイズによって切り替える際に効果的かもしれませんね。