-
1:ID:vKcdkH · 2019-01-31

コーディングしている方に質問なのですが、画面幅が1920pxで作成されたphotoshopのデザインカンプに関して、PCサイズが1440pxや1024pxの時でも要素の幅や高さ、文字サイズの比率を揃えるためにはvwを使用するのが一般的なのでしょうか。

vwでも1024pxのサイズで見た時にかなりデザインが崩れてしまうので、メディアクエリで調整している状態なのですが、もっと良い方法はないのでしょうか。

14 件の回答

2:ID:v.zxV5 · 2019-01-31

1920のサイズであっても中の主要コンテンツは1024内に収まってるとかじゃないですか?
普通はそうだとおもいます。

3:ID:SLglau · 2019-01-31

基本的には文字サイズ等は同じで、テキストが折り返して縦に伸びても崩れないように組みます。ただ1024pxとかでどうしても文字が大きくてバランスが悪い場合はメディアクエリでそこだけ調整していますね。クライアントやデザイナーから指示がある場合は別ですが。

4:ID: · 2019-01-31

Re:2
確かに1000pxの中に主要コンテンツは収まっています、ということは
画面サイズが1920pxから1024pxに縮まるにつれて両端の余白を縮めつつ、主要コンテンツはpxで指定、という組み方が一般的なのでしょうか?

5:ID: · 2019-01-31

Re:3
テキストが折り返して縦に伸びても崩れないように、の部分ですが例えば画像の上に文字がある場合なんかは画像の高さをvwで調整、ということでしょうか?

6:ID:r5bHxM · 2019-02-01

いわゆるコーディングを丸投げされた状態なんやな。果たしてそのデザイン成立するの?まずはそこからかな

7:ID:q06FJW · 2019-02-01

つまり、1920幅のデザインしかもらえていないってことやね。
それ、デザイン完了してないよ。というか、その範囲はデザイナーの責任。コーダーが考えるところじゃない。仮に主がデザインに無知なコーダーだとするならば、絶対に失敗するから、素直に今の状態をデザイナーにリジェクトしたほうがいいと思う。まぁ、コーディング知らないデザイナーに戻しても結果は一緒だけど、お互いに抱えるコストが変わってくるから、あるべきところにちゃんと仕事を戻すべき。

8:ID:q06FJW · 2019-02-01

Re:7
ちなみに、ブレイクポイントの要件は、デザイン・コーディング以前にあるべきなので、デザイナーにブレイクポイントごとのデザインを作ってくださいといえばいいと思う。ブレイクポイントの設定がないとするならば、素直に弱小企業にいる自分を呪いなさい。

9:ID:ztuqzL · 2019-02-01

Re:7
デザイナーもともかくディレクションもザルっぽいよな。こういうしわ寄せって下流工程のコーダーに負担がかかってしまうWeb制作の悪しき習慣だね。

10:ID: · 2019-02-01

Re:7
説明が不足していてすみません。
PC版として1920pxと、スマホ版として750pxでもらいました。スマホ版はまだ良いのですが、
PC版の1920pxの方が、1024pxにした時に要素の幅や行間などが調整がつかずに困っている状態です

11:ID: · 2019-02-01

Re:6
1920pxでコーディングしたことがないもので・・これって丸投げなんですね

12:ID:GbhqvG · 2019-02-01

普通は画面サイズが変わった時どうするかとか、具体的でないにしろある程度指針を示すものだと思うけど、、デザインで作るのはあくまで仮の姿だし。

13:ID:lXwLwF · 2019-02-01

「一般的 = よくある形」っていう暴論になるけど、
コンテンツ幅(主要コンテンツが収まっている幅)が1,000pxなのであれば
画面幅が1,440pxであろうが1,024pxであろうが、主要コンテンツの要素サイズは変えないな。(vwでは指定しない)
画面幅が小さくなったときの振る舞いを考えるのは、画面幅がコンテンツ幅より小さくなった時。

いずれにせよ、指示されてないならまず確認したほうが良いな。

14:ID:q06FJW · 2019-02-04

Re:10
モバイル用のデザインがあるとかないとかの話じゃなくて、ブレイクポイントごとのデザインがあるかどうか、範囲内で伸縮した場合のデザインがされているかどうか、これが論点。いずれにしてもコーダーが考えることじゃない。

15:ID:yDft5G · 2019-02-05

確認する以外の選択肢はないと思います

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る