Q&A
カンプを出したデザイナーに確認すべき部分ですが、おそらくレティナ用画面を想定した横幅と思われますので、
Webブラウザ上では、半分の、
980pxとして、（画像は2倍のまま、もしくは、等倍と二倍のままで表示分ける）想定してコーディングすればちょうど良くなると思います。
つまりは、前述しましたが、カンプを出した人に確認必要ってことです。
デザインカンプからのコーディング、bodyのwidthの設定について
カンプの横幅が1920pxで設定してあります。
cssにてbodyにwidth:1920pxを設定すると、私のブラウザの画面から切れます。(スクロールで見ることができます。画面の横幅を狭くしていくと、切れてしまいます。ピッタリ張り付いた画面になっています。)
max-width:1920pxを設定すると、画面幅に収まりますが、検証ツールで確認すると、
bodyのwidthは1300pxになっています。
widthをどんな風に設定すればよいでしようか。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
bodyにはpxは設定せず、100%とするのがベターです。
見せ方（横幅）についてはデザイナーさんと相談して決めてください。
投稿2020/07/26 13:48
総合スコア271
ご回答ありがとうございます。そのカンプでは、heder-logoのサイズが700px × 150px,font-sizeが120ｐｘのテキストが多数あり、ブラウザ幅の表示ではレイアウトが崩れてしまいます。デザインカンプの幅は1920ｐxゃ、1366ｐｘが主流とききますがコーディングする時はbodyの幅はきにしなくてよいものなのでしょうか。それともデザイナーさんから何か注意事項としてお知らせいただけるものでしょうか。
html, bodyの幅は子要素の幅に応じて変化できるように100%に指定します。
他の方のご指摘どおりにRetina対応で作成されているかもしれないですね！
デザイナーさんに依っては、コーダーさんがよしなに考えて実装してくれると思っている人がいますので、デザインファイルをもらう時は実装方針についてMTGを必ず行います。
私は、以下事項をデザイナーさんに確認するようにしています。
・レスポンシブなのか
・レスポンシブの場合はリキッドレイアウトなのか
・今回のファイルの場合は、 Retina対応のためなのか ← ※ここは確認マストです
・Googleフォントは使うのか
・参考にしたサイトはあるのか
・ボタンにホバーしたときのエフェクト希望はあるのか
・JSで実装するところがあるのか
実装を進めてから指摘を受けると修正に時間がかかるので、先に不明点はすべて洗い出してから実装を進めたほうが良いです。
コーダさんに依っては実装可能不可があります。その事を伝えるとデザイナーさんは他の見せ方を考慮してくれたりします。
丁寧なご回答ありがとうございます。実装方針を再度洗い出して詳しく伺ってみます。まだまだ知識不足であらかじめ何を聞いたらよいのかも分からず、実装中に疑問が出てからのお伺いでした。教えていただいた確認事項もチェックします。ありがとうございました。
あなたの回答
tips
プレビュー
