質問: コーディング学習中のため、非常に初歩的な質問ですみません。 psdなどのデザインカンプからコーディングする際、元の画像サイズ1200pxを最大幅として作成すると PCで表示させた際、両端にデザイン上存在しない余白ができます。 ↓見本画像 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0958900baa3fd66a98a13ebc479f7f88.jpeg) ↓模写した物 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9801c0343fa694e468d7f93053b9b240.jpeg) この状態でChromeのデベロッパーツールで画面サイズを1200pxにし、拡張機能のPerfectPixelで見本と合わせてズレの確認をする、、 というところまでは行ったのですが、この状態が正しいのか疑問に思いました。 こちら(別サイトリンク)の別のデザインカンプを配布している方の見本サイトを見てみると、元のデザインの横幅が1280pxですが、PCで表示してみるとtop画像の両端に無駄な余白が無くモニタサイズに合わせて最大限横に広がって表示されてるんですよね、、 ↓参考画像 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/77c49cf9a9f10cd31a37a1406822162f.jpeg) 私のようにpsdの数値をそのまま当てはめた場合、モニタサイズによっては両端に余白ができると思うのですが、 何か読み取り不足やサイズ合わせ等の根本的な考え方が間違っているのでしょうか?
回答: これはheaderデザインやサイトの構成 またコーディングされる方それぞれだと思いますが。。。 私の場合は、要素を置くためのinnerを作って heder, main, footerは 画面一杯でも、最大幅指定でも フレキシブルに使えるようにする事が多いですね ``` heder, main, footer{ width; 100%; } .inner { width; 96%; max-width; 1200px; margin: 0 auto; } 以下略 ``` カンプサイトでは 100%headerにbackgrandで画像を置いているのかな? と思います