デザイナーTweetレスポンシブデザインでwebサイトを制作することが多くなってきていますが、その中でスマホの場合を考えられてないケースが多々あります。本来であればレスポンシブの構造上、スマホファーストで考えるべきところなのですが、PC先行でデザインし、後でスマホをどうにかするってパターンになってしまっています。同じ画像ではダメなことがあります。スマホファーストで考えていても、PCは横長でスマホは縦長なので、サイズを違うものにしたい場合もあると思います。そんな時、PCとスマホで画像を切り替える必要があります。今回はjQueryを使用した方法をご紹介します。jQueryを使ってレスポンシブデザインでPCとスマホで画像を切替える方法どういうものかというと、特に難しいことではなく、windowのサイズを測って、設定したい数値以下であれば、imgのパスを変えるというものです。以下のソースを直書きか、別ファイルに記述して読み込ませます。'_sp'));});}});あとは以下のように変更させたいimgにclass「imgChange」を付けます。class="imgChange"></li></ul>これだけで、「imgChange」とつけたものは、一括で変更されます。画像切り替えたいものを一つ一つ書くのはめんどくさいので、classをつけるだけで、変更される方が簡単ですよね。これはスマホの場合、PCとスマホの画像を読み込むので、ちょっとロードのパフォーマンスが落ちちゃう可能性があります。二重に読み込ませない方法この方法はもしかしたら他のことに影響あるかもしれませんし、ieとかで動かないかもしれませんが、srcを空にして、data属性というものを使用します。{$('.imgChange2').each(function(){$(this).attr("src",$(this).data("img"));});}});となります。ちなみにデモの最後の画像はこちらの方法で設定しています。いえ極力違う画像使うのは避けたいですね〜。ProfileY.Aアベと申します。ディレクター兼デザイナー兼コーダーです。未熟者ですが、日々頑張っています。