- ベストアンサー
レスポンシブがよくわからない
- レスポンシブに変更する方法として、多くの解説サイトで@media screen and (min-height: 600px)を使用することが説明されていますが、なぜこのCSSで端末の振り分けができるのでしょうか？
- 横解像度の違いによって、端末ごとに文章の折り返しが異なることは仕方がありません。改行や右端での折り返しに関して取引先から怒られた場合、文字をremで指定することやフォント自体の幅の違いを考慮することで見やすさを向上させることができます。
- レスポンシブデザインを実現する方法として@media screen and (min-height: 600px)が一般的に利用されています。スマートフォンの横解像度が1024pxでも、スケールによって@media screen and (min-height: 600px)に収まるようになっている可能性があります。しかしこの点について詳しく説明しているサイトは少なく、単純に@media screenを使用するとのみ説明されています。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- t_ohta
- ベストアンサー率38% (5320/13881)
＞ 取引先が両方に対応しろ（文字の大きさが見やすくて、端末によって全て同じ見え方にしろ）と言っているので悩むところです・・・。 そういった要望を究極に実現したのがページ全体が画像で出来ているページでしょう。 もしくはPDF化して読ませるとか．．． 基本的な発想は紙媒体であってWebの利点を理解していない人の発想ですよね。 どんな環境でも同じように見えるというのは見せる側の自己満足でしかなく、見ている人の利便性を無視した愚かな行為です。 デバイスの種類が多様化した今の時代、そんな考え方がナンセンスだと言うことを教えてあげるのもWeb制作に携わる人間の仕事だと思いますよ。
お礼
ありがとうございます！ ＞そういった要望を究極に実現したのがページ全体が画像で出来ているページでしょう。 はい、画像と同じように文字もどの端末でも同じように見えるようにしろとのご命令でして・・・。 ＞デバイスの種類が多様化した今の時代、そんな考え方がナンセンスだと言うことを教えてあげるのもWeb制作に携わる人間の仕事だと思いますよ。 そう言われるとその通りですね＾＾； もう一回きちんとご説明しようと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
質問1に関しては ⇒CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き の「4. スマートフォンならではの Viewport」 ( http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/ ) にとても詳しく書かれているので譲るとします。 質問2に関しては、 もともとHTMLは、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より なのですから、大事な事は『どんな環境からもWebの情報を利用できるようにすべき』であって、「改行や右端での折り返しが端末ごとに異なると怒られた」はある程度視片がないのですが、ひょっとしてHTMLそのものに問題があるのじゃないかと・・ ちゃんと段落は<p></p>でマークアップされていていますか？。<br>を代用するなどしているのでは？？ 『divブロック内の文章がどの文字でdivの右端で折り返されるかは端末毎に変わるのは』 の意図がわからないのですが・・。divの使い方そのものが？？？
お礼
ありがとうございます！ 質問1に関して 自分でもちょっと調べてみましたら以下のサイトが見つかりました。 http://www.entereal.co.jp/blog/entry_media-queries-for-iOS-devices.html iPhone、iPadだけでもこれだけの種類に別けなくてはならないのですね。 これにandroidが加わればデバイスの振り分けがかなり厳しいのではないかと思います。 実際に皆さんはかなり多くの解像度振り分けをされているのでしょうか？ 私は html {font-size: 62.5%;} div { font-size: 14px; /* rem未対応ブラウザ用 */ font-size: 1.4rem; } このようにしています。 なのでMedia Queriesでの振り分けやmetaタグにviewportは設定していません。 これでも一応androidとiPhone5はいい感じで表示されています。 （boilerplate.cssというのは導入しています） 作っているサイトが1カラムなのでスマホでも対応させやすいのでこの簡単な方法 しか採用していません。 自分がやっているこの方法でいいのか悩むところですが、Media Queriesを使った場合 やはりいろんなデバイスで確認しないとダメですよね？ 自分はandroidしか持っていないのでなかなか確認ができません。 質問2に関して ＞ちゃんと段落は<p></p>でマークアップされていていますか？。<br>を代用するなどしているのでは？？ ＞『divブロック内の文章がどの文字でdivの右端で折り返されるかは端末毎に変わるのは』 ＞の意図がわからないのですが・・。divの使い方そのものが？？？ たとえばヘッダー用divに以下のような文章を入れたとします。 <div><p>これはテストサイトです。これはテストサイトです。これはテストサイトです。</p></div> PCでは横幅800pxに1行で収まるとします。 しかしスマホでは、 これはテストサイトです。これはテストサイトで す。これはテストサイトです。 このように2行で表示されてしまいます。文字の大きさをremで指定しているためです。 これをpxで指定してしまうと今度は文字が小さくなって見づらくなってしまいます。 取引先の言い分は、「スマホでも文字を見やすい大きさにしつつ、1行に収まるように、もし<br>を 使っていたらきちんと改行も正しくなるようにしろ」という感じでした。 改行を使っている場合（<p>でもいいですが） <div> <p>これはテストサイトです。これはテストサイトです。</p> <p>これはテストサイトです。これはテストサイトです。</p> </div> これをスマホで表示すると これはテストサイトです。これはテストサイトで す。 これはテストサイトです。これはテストサイトで す。 となってしまいます。 文字の大きさを見やすい大きさに調整しつつ、文章が適切な表示に収めることにかなり苦労して いますが、皆さんはどのようにしているのでしょうか？ 長文失礼しました。どうぞよろしくお願い致します。
- t_ohta
- ベストアンサー率38% (5320/13881)
回答１ スマホやタブレットのブラウザにはviewportと言う概念があります。 これは、ディスプレイの解像度とは別にブラウザが便宜上表示領域の解像度をいくつと認識するかと言うものです。 なので、各々の機器のディスプレイの解像度を気にすることなくページの解像度を指定できます。 スマホだと短辺は320～360px、長辺が480～570pxくらい、 タブレットだと短辺が600～780px、長辺が960～1024pxくらいに設定されています。 （多少幅があるものの、端末・メーカーが異なってもだいたい同じサイズに決まってます） レスポンシブはこのサイズをベースにデバイスを判定するよう考えられています。 回答２ DIVの幅とフォントサイズをpx指定すると折り返し位置は大概揃いますが、あまり意味の無いことだと思います。 文字は人によって、端末によって見やすいサイズが異なるので、見る人が見やすいサイズに拡大・縮小しても漏れなく情報を表示できるよう作ることの方が大事なのではないでしょうか。
お礼
ありがとうございます！ 回答1ですが、便宜上の解像度だったのですね。 デバイスの種類、ちょっと調べて見ようかと思います。 回答2ですが、px指定だとスマホで文字が小さくなってしまいますよね。 折り返しを意識しなくてもいいデザインにすればいいのでしょうけど、取引先が 両方に対応しろ（文字の大きさが見やすくて、端末によって全て同じ見え方にしろ）と 言っているので悩むところです・・・。
お礼
ありがとうございます！ ＞viewportを使うと、逆に文字数との指定は楽になります。 そうなのですね。デバイスが多くて逆に面倒なのかと勝手に思ってしまいました。 ちょっといろいろ調べて勉強してみようと思います。 ＞ウェブページをまるでカタログや印刷物のようなイメージで捉えているクライアントも存在します。その方には、実例を上げて説明して納得してもらう。それも請けた側の仕事の一つですね。 ああ、やはりそうですよね・・・。画面を見せながら説明しているのですが なかなかご理解いただけなくてかなりお怒りです・・・。 自分の努力と知識が足りていないので当たり前なのですが。 とりあえず皆さまにアドバイス頂きまして現状がわかってきましたのでもう少し調べてみようと思います。 どうもありがとうございました。