執筆書籍アクセス解析マーケティングリスティング広告SEOSNS・ソーシャルメディアWeb制作ホームページ制作関連ランディングページ制作EC・モールツール2017.12.19JavaScriptとcss不要!picture要素で画像をレスポンシブにWeb制作ホームページ制作関連こんにちは、制作部の青木です。タブレットやスマートフォン(以下:スマホ)の普及により、インターネットを見る際には、パソコンではなくスマホやタブレットで見る機会が増えています。その結果、ホームページ等を制作する際には、様々なウィンドウサイズで最適に画像を表示させる必要性があります。そこで今回は、コーディング歴が短い初心者の方でも簡単にJavaScriptやcssを使用することなく、指定した画面サイズで画像が切り替わり、簡単に画像をレスポンシブ対応にする方法を、HTML5.1で新しく追加された<picture>要素を使って説明させていただきます。・高解像度ディスプレイにも対応できる・まとめ<picture>要素とはスマホで見ているのにも関わらずPCサイトで使用している大きなサイズの写真を読み込むことが多々あります。画像サイズが大きいためサイトが表示されるのに時間が掛かってしまいます。ピンチインアウトで画像を拡大表示させたり、視認性も悪くスマホで見ているユーザーにとって不親切なサイトであるため、離脱に繋がってしまいます。そこで画像をPC用、タブレット用、スマホ用に対応する必要性があります。<picture>要素を使用すれば、JavaScriptやcssのメディアクエリを使用することなく、ウィンドウのサイズに合わせて画像を切り替えることができます。下記の画像をご覧ください。ディスプレイの横幅を変えると、PC用、タブレット用、スマホ用で用意した画像に切り替わります。実機で見比べると比較できるので分かりやすいかもしれません。こちらがサンプルのコードになります。通常のimgタグに少し書き加えるだけで、レスポンシブができてしまいます。alt=""></picture>ソースを見て下さると、スマホで見たときはsp.jpgの画像を表示、タブレットで見たときはtab.jpgの画像が表示、またPCで見たときはpc.jpgの画像が表示される内容となっています。要素の中にmediaを指定することにより、ウィンドウサイズがそれぞれの指定したサイズになると、指定した画像を表示させることができます。高解像度ディスプレイにも対応できる昨今、高解像度のRetinaディスプレイがPCのみならずiPhoneXやGalaxy等のスマホでも高解像度が主流になってきています。高解像度ディスプレイに画像を対応させていないと、高解像度のユーザーは画像が荒れて見えてしまします。綺麗なサイトを作ったとしても、見る人によっては、画像が荒れていると見栄えも悪くなってしまいます。そこで高解像のディスプレイでも画像が劣化しない方法も<picture>要素を応用することによって高解像度に対応した画像を切り替えることができます。alt=""></picture>上記のコードのみで、先程と変わることなくレスポンシブに画像が表示されます。高解像度のディスプレイの時には、別で用意してある高解像度の画像が表示されるようになります。srcset属性は複数の画像を指定することができます。カンマで画像を区切り、「2x」と書き込みます。こちらの「2x」ですが、通常のディスプレイの2倍解像度があるときには、こちらの画像を表示させるという意味があります。細かく設定したい時には、「1.5x」も用意をしても良いかと思います。まとめ<picture>要素による画像のレスポンシブにする方法はいかがでしたでしょうか。複雑だから極力JavaScriptを使いたくない人や、コーディング歴が短い初心者の方でも使いやすい方法だと思います。自分が指定したウィンドウサイズや高解像度のディスプレイなどで画像を切り替えるという比較的簡単なコードで画像をレスポンシブに対応をすることができます。html上にたくさんの画像を用意して、さらに高解像度の画像もあり、むしろ読み込み速度が遅くなるのではないかと疑問を持つ方もいるかもしれません。読み込む画像は、指定したウィンドウサイズやディスプレイのみを読み込んでいるため、むしろ画像を読み込む時間が早くなり最適化されます。スマホで見ている人は、PC用の無駄に大きな画像を読み込まなくて済むので、スマホで最適なサイズなので通信量も少なく表示ができます。一度試してみてはいかがでしょうか。まで一気通貫した完全オーダーメイドのWebコンサルティング。お客様のビジネスゴールに向けた戦略的コンサルティングを行います。ホームページ制作キレイなだけじゃない競合分析・サイト設計から更新・運用までトータルサポート。Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。あなたのサイトを丸裸にWebサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。最新情報をお届けメールアドレスを登録していただくと、おすすめ情報やアクシスブログの更新情報をお届けいたします。058-267-1430URL:https://www.axis-corp.com/お問い合わせはこちら私達は、お客様のインターネットからの売上・利益を最大化させるネット技術のプロフェッショナル集団です。WEBコンサルティング、集客、解析、ホームページ制作などさまざまなサービスを用いて、お客様にとって最適な状態を導き出します。すべてのお客様に、一流の結果をご提供いたします。CORPORATION。