老親介護に悩む30~60代の方へ
老親介護ねっと[老人ホーム編]
トップ 老人ホームの選び方 介護関連ニュース 新規オープンホーム情報 老人ホーム取材レポート お問い合わせ リンク集 Q&A

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

回答受付中の質問

レスポンシブのデザインについて

ポスポンシブのデザインを設計する際はどのように書いていますか?
iPhone5系などの320×568を基準に作っていますか?
それともシェアが多い375×667を基準ですか?

デザイナーからspのフレームワークをもらったのですが、基準が750pxになっており、750pxではパーフェクストピクセルで表示できるのですが、320×568ではやはりレイアウトが崩れてしまいます。
なぜかというとそもそもボックスがwidth:600pxとなっていてiPhone系ではレイアウトが崩れます。
今回はpcとタブレット兼スマホでブレイクポイントを作っていますので、この場合では750pxではなく画面サイズが小さいスマホ(320px)を基準に作るべきではないのですか?

320px基準であれば750pxに画面幅が広がっても拡大されるだけなのでレイアウトは崩れないと思うのですが、、、
レスポンシブを初めて作るので勝手がわからず、意味不明な質問かもしれませんが、回答よろしくお願いします。

投稿日時 - 2018-05-15 18:54:23

QNo.9498742

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

意味不明ですね。

レスポンシブというのを理解していますか。

あれは、表示レイアウトを調整するものであって、表示するものを拡大するもんじゃないのですが。

<div>だの<span>だので囲んでいる表示部分が、一種のユニットですね。そのユニットを横に並べるか、縦にするか、を、受信している端末の表示サイズに合わせて調整できる、というのがレスポンシブの実態です。

つまり、そのユニット部品を横に並べる書き方をしていると、ブラウザの表示画面をはみ出すようなら勝手に改行をしてそこから下に落とすということをするんです。

たかがそれだけのことです。

それを、うまくブロック化できなくて変なHTMLの生の書き方でレイアウトをしていると無残なことになるわけです。

320×568が基準もなにもないです。自分が想定している状態に合わせるためにCSSの設定を変えればいいだけじゃないですか。

デザイナがどう書こうとも、自分はこのレイアウトを想定しているというだけでたかがCSSで1行でしょう。なぜ基準だとか正しい間違っているというのか意味不明なんです。

自分が想定しているところに合わせようと調整すればいいだけです。

しかし、仕様の画面サイズなんかにぴったり合わせると考えないほうがいいだけです。それをやると思ったことと実際表示が齟齬をきたす場合があります。どこで改行したいと考えるかは、HTMLの仕様じゃなくて、ブラウザが考えることですから。だから多少遊びを作って設定をすればいいんです。

投稿日時 - 2018-05-17 09:42:37

補足

回答ありがとうございます。
"それを、うまくブロック化できなくて変なHTMLの生の書き方でレイアウトをしていると無残なことになるわけです。"とありますが、
たしかに画面サイズが小さくなるとブロックがカラム落ちし、デザインが崩れてしまいます。
これはHTMLの書き方が甘いのでしょか?

また意味不明な質問かもしれませんが、750pxで表示するデザインを渡されてボックスサイズが600pxのものが縦に3つ並んでいます。
A
B
C
このようになっています。
ウィンドウサイズを320pxに縮めた時は600pxのボックスが下に伸びると思います。その際にAのボックスの下部がBにかかってしまいデザインが崩れてしまいます。
ですが320pxのデザインでボックスサイズが200pxのものが3つ、
a
b
c
となっていれば750pxにサイズを大きくしてもウィンドウサイズに合わせて横に伸びて下のボックスには干渉しないですよね?

少し長くなりましたが、
私が言いたいのは750pxのデザインで横幅が600pxのボックスがあるのにもかかわらず、320pxで表示した時も750pxを同じデザインになるようにパーフェクトピクセルで表示しろという指示に疑問が浮かんだのです。

投稿日時 - 2018-05-17 11:36:14

ANo.1

レスポンシブデザインを根本から誤解されているようです。
回答は他の方にお任せしますが、素朴な疑問として。

>320px基準であれば750pxに画面幅が広がっても拡大されるだけなので

「750px基準であれば320pxに画面が狭くなっても縮小されるだけなので」
とは思わなかったのですか?

投稿日時 - 2018-05-15 19:46:33