スマートフォン用に違う画像を表示させたいそんな時には、レスポンシブで画像サイズを切り替え（メモ）

おすすめ記事ピックアップ

レスポンス対応のランディングページを作っていて、どうしても画像を切り替えたい部分が出てきました。下記サイトがとても参考になりました。他にもいくつかのサイトがあったのですが、これがclass指定だけで使えるので、一番便利でした。

引用元 jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験
http://black-flag.net/jquery/20120808-4047.html

このサイトの通り設定したのですが、なぜか動きません。jquery1.7.1見落としていました。。。jquery1.7.1が動作に必要です。サイトにはサンプルのファイルもあります。説明を見てそれをダウンロードすれば、設定できるでしょう。簡単にどのような機能か説明します。

特定の画面サイズ以下になった場合、Javascriptによって、画像のファイル名を書き換えてくれます。予めスマホ用に画像を用意しておけば、切り替えることができます。例えば横長の画像を、スマホでは縦長にするってことが可能です。すごい便利。

画像の一部に「_pc」と「_sp」と入れて、HTML上で画像にclass「switch」指定すれば、対象画像は、対象条件のときに「_sp」の画像に切り替わります。1ピクセルの透過画像とかにしておけば、特定の条件の時に画像を表示させることも可能でしょう。

という感じで、いろいろ便利な小技なのでメモです。他のjqueryとjquery1.7.1が、動作に影響しそうな気もしますけど、とても便利でした。

あと自分メモとして、switchのjavascriptを外部ファイルにして、そのなかにjquery1.7.1も入れちゃって、外部リンクして、cssのvisibility設定を忘れずに。