質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

2回答

15099閲覧

レスポンシブデザインのimgタグをsrcsetで設定しても、画像の切り替えができない

ami15821

総合スコア56

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

1クリップ

投稿2016/08/24 10:00

編集2016/08/24 10:20

srcsetによるPCサイトとSPサイトの画像の切り替えソースを入力したのですが、切り替わりませんでした。。。

同じように質問している方(URL:https://teratail.com/questions/8678)の内容も確認をしたのですが、わかりかねたので質問させていただきます。

HTML

1<img src="images/hoge.png" srcset="images/hoge.png 1x, images/hoge.png@2x.png 2x" alt="画像">

確認ブラウザはChromeで、エミュレーションでPC表示とSP表示の確認をしています。
ブラウザで確認をすると、PCサイトでスマホ用の画像が表示されてしまって画像の切り替えがでいていません。

解決したいことは
表示されない原因の特定と、その確認方法を教えていただきたいです。

また、すべてのブラウザで対応がされてはいないとのことなので、その対策としてのpicturefill.min.jsはダウンロードして読み込めるようにしてあります。

HTML

1<head> 2<!-- picturefill.js --> 3<script src="js/picturefill.min.js"></script> 4</head>

入れる前、入れた後の変化(画像の切り替え)はありませんでした。

どうか、ご助力お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/24 10:10

「同じように質問している方」について、URLを添付ください。
ami15821

2016/08/24 10:13

修正依頼、ありがとうございます。 URLの添付をします
kei344

2016/08/24 10:15

「確認ブラウザはChrome」とありますが、PCもスマホもChromeと言うことですか?PC上でエミュレートしているとかではないですよね?
ami15821

2016/08/24 10:17

はい、エミュレートで確認しています。 そちらも修正します。
guest

回答2

0

自己解決

参考サイト http://kia-king.com/blog/tutorial/responsive-images-with-srcset/
上記サイトを参考に、修正いたしました。

元のコードと修正後のコードが以下になります。

HTML

1<img src="images/hoge.png" srcset="images/hoge.png 1x, images/hoge.png@2x.png 2x" alt="画像">

HTML

1<img src="images/hoge.png"sizes="(min-width: 640px) 100vw"srcset="images/hoge.png 320w,images/hoge.png@2x.png 640w,images/hoge.png 1280w"alt="画像">

元コードだと、chromeのPC画面表示でも、エミュレートで確認でも、画面サイズによらず全ての画像が@2xのサイズになってしまっていました。

そこで、細かな設定を加えたのが修正コードになります。

メディアクエリの設定を加えることで、画面サイズによって詳細に画像の切り替えができるようになりました。

そして私の確認環境ではパソコン画面での表示もレティナ表示になっていたので、srcsetの320wと640wに1280wを追加設定しました。

1280wがないと、パソコン画面がレティナ表示なので640wに設定した画像がパソコン画面で表示されてしまいました。

参考サイトはとてもわかりやすく説明してくれているので、同じような現象が起きてる人の助けになるかもしれません。

投稿2016/08/28 05:06

ami15821

総合スコア56

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

【レスポンシブ・イメージをテストする際の2つの注意点と開発者ツールの設定 – Rriver】
http://parashuto.com/rriver/responsive-web/two-things-to-watch-out-when-testing-responsive-images

こちらを一度確認してみてください。

投稿2016/08/24 10:22

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ami15821

2016/08/24 11:23

URLの添付、ありがとうございます! 確認させていただきました。 確認事項の2点 1.キャッシュが残ってしまっている可能性の確認 2.Retinaディスプレイで確認していて表示がされないようになっている可能性の確認 1,の確認をchromの設定をキャッシュ無効にして確認したのですが、表示は変わりませんでした。 2.パソコンをMacBook ProのRetinaディスプレイモデルを使っていたことを確認したので、chromの「device mode」でDevice pixel ratioの変更の仕方を確認しました。これはもともとオフになっていなかったようなので、Retina表示にはなっていなかったようです。 送っていただきた確認事項は試させて頂きましたが、画像の切り替えを確認できませんでした。。。
kei344

2016/08/24 11:46

「device mode」を表示して、レスポンシブにして、そこでratioを1にするのでは? https://jsfiddle.net/0m1h3t50/ 上記をテスト環境を用意しました。srcsetが効かない場合「赤」、pixel ratio 1の場合「緑」、pixel ratio 2の場合「青」が表示されると思います。(Windows Chromeで緑、青の切り替えが出来ました)
ami15821

2016/08/24 13:31

レスポンシブにして、「add device pixel ratio」を選ぶとDPR:2.0と表示されるのですが、こちらがDPR:1.0に修正できないようになっています。みているところが違うのでしょうか? テスト環境、確認させていただきました。 ありがとうございます。 ただ、jsfiddle.netを使ったことがないため、現状使い方を調べながらいじらせて頂いております。HTMLの欄で入力したコードの反映をRunを押すことで右下の表示確認で見ることができる、というところまではわかったのですが、 >srcsetが効かない場合「赤」、pixel ratio 1の場合「緑」、pixel ratio 2の場合「青」が表示される こちらの意味がわかっていないため、どう操作したらいいか困っております。 テスト環境を用意して頂いたのに申し訳ございませんが、テスト環境の活用方法を教えて頂けませんか?
kei344

2016/08/24 13:46

> レスポンシブにして iPadなどデバイスを選択するところで、一番上にある「Responsive」でも選択できませんか?一番下にあるEdit⇒Add Custom device... からデバイスが作れると思うので、そのpixel ratio を 1 にしてみてください。レティナPCには対応してないのかな・・・。 > こちらの意味がわかっていないため ページが4分割されていませんか?その右下が結果表示部分です。そこに青色の画像がありませんか?そのページを Chrome のエミュレータでDPRを切り替えながら確認すれば 1. srcset が効いているか 2. srcset のx2とかが適切に働いているか が確認できると思ったのですが、DPRを切り替えられないと意味ないですね。 見てもらうつもりだったのは、「エミュレータが正しく動いているか」です。質問文に書かれている範囲では画像のパスが間違っていない限り問題なくDPRにあった画像が選択されるはずなので、エミュレータが正しく動いていない(設定されていない)と言う状況だと思います。
ami15821

2016/08/24 14:47

失礼いたしました! テスト環境で一番上にある「Responsive」を選択してpixel ratio を 1 や2に変えたりすると緑、青の切り替えが出来ました。
kei344

2016/08/25 05:49

ご自身の書かれた srcset は確認できましたか?
ami15821

2016/08/25 08:38

じぶんで書いたコードの確認を試みたのですが、jsfiddle.netに表示させたい手持ちの画像をアップするところがわからなくて、 srcset での表示の確認できていません。 申し訳ありませんが、使い方のサイトなどありましたら教えて頂けますでしょうか?
kei344

2016/08/25 09:00

jsfiddle.netを使わなくてもご自身で作られたページをChromeで確認されては? jsfiddle.netはあくまでChromeの設定を見てもらうために提示しただけなので、青緑の切り替えができた以上使わなくても大丈夫ですよ。
ami15821

2016/08/26 03:46 編集

お返事遅くなってしまって失礼いたしました。 自身で作ったページに「Responsive」を選択してpixel ratio を1や2に変えたりすると、画像の切り替えができていました! これで切り替えの確認方法がわかったのですが、PCサイト表示にするとスマホ用画像の表示になってしまっているのは使っているパソコンがMacBook ProのRetinaディスプレイモデルだからなのでしょうか? @2x以外はpc用画像なので、設定の仕方がそもそもちがうのでしょうか?
kei344

2016/08/26 05:53

「PCサイト表示」というのはツールではなく普通にページを見たときと言うことでしょうか。srcset での「x2」は「レティナ表示をしているデバイスにはレティナ用を渡す」と言う処理なので、スマホかどうかは関係ありません。指定に合ったほうを出力しているだけです。
ami15821

2016/08/28 04:41

kei344さん お返事遅くなりまして失礼いたしました。 srcset での「x2」の概念が理解できていなかったので、四苦八苦しておりましたが、なんとか設定方法が分かりました! 今は無事に表示されるようになったので、解決内容を下記に記載させていただきます。 ご対応ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問