Create2016.09.11トライムでは殆どの案件がレスポンシブWebデザイン対応しています。下記の記事にも書いていますが、サイトによってはPCとスマートフォンのシェアが逆転することもあり、スマートフォンへの対応は欠かせなくなっていますね。BtoB・BtoC向けWebサイトデザインのポイント沢山のサイトを作っていく中で、少しずつ効率化していった技術があり、今回はその一部をご紹介いたします。画像を差し替えるレスポンシブWebデザインでよくあるのが、PC用とSP用の画像の差し替えです。SVGに対応したブラウザの普及で、同じ形の画像をPC用とスマートフォン用に分ける必要性はなくなってきてはいますが、やはり画面サイズの違いから、形の異なった画像に差し替えなければいけないケースは多々あります。そんな時、例えばCSSだけで実現しようとした場合、下記のような方法が考えられます。noneで非表示にさせる方法です。768px以下になった時に.spが表示され、逆に.pcは消えます。これでも表示に問題はないのですが、やはりコーダーとしてはこのソースは気持ちが悪いですね。jQueryで動的に差し替えるそこで社内ではこのような方法で対応しています。src="pc_img.png">用意する画像はpc_hoge.jpg、sp_hoge.jpgのように、名前の先頭にPC用の画像には「pc_」を、スマートフォン用の画像には「sp_」を付け、同じディレクトリに配置します。}})1行目の記述で読み込み時とウィンドウのリサイズ時にイベントが発火します。3行目で現在のウィンドウサイズを変数に入れ、4行目では画像を変更したいサイズを指定しています。6行目がw(ウィンドウサイズ)がx(指定した数値)と等しいか、それよりも小さかったらという分岐です。等しいか、それよりも小さかった場合、変数のbeforeには「'pc_'」が入り、afterには「'sp_'」が入ります。条件を満たさない場合はelseが実行され、before、afterが逆になります。あとはreplaceImgという関数が実行され、src属性の中身がbeforeからafterへと置換されます。サンプルウィンドウサイズを変更して試してみてください。CodePen.まとめ最近はスマートフォンがメインのサイトも増え、どちらの画像を主とするかで、あらかじめHTMLに書いておく画像は変更が必要かもしれませんが、上記のJSであればどちらのケースにも対応できます。活用してみてください。シェアツイートブックマークWriterKO誕生日に会社のみんなから『世界文学全集』をプレゼントしてもらった読書好きフロントエンド・エンジニアです。WordPressとMovableTypeが得意ですが、本当の特技は薪割りです。1[SASS]koalaのAutoplefix使ってみた。Create【レスポンシブ】jQueryでウィンドウサイズによって画像を差し替えContactご提案依頼、ご相談、お見積もりなどお気軽にお問合わせください。10:00~19:00「Web制作について」とお伝え頂ければ担当者に取次させていただきます。Mailformcontact@trym.jpでも受け付けております。