デザインカンプからのコーディング、両端にデザイン上存在しない余白ができてしまう

Question

コーディング学習中のため、非常に初歩的な質問ですみません。

psdなどのデザインカンプからコーディングする際、元の画像サイズ１２００pxを最大幅として作成すると
PCで表示させた際、両端にデザイン上存在しない余白ができます。

↓見本画像

↓模写した物

この状態でChromeのデベロッパーツールで画面サイズを１２００pxにし、拡張機能のPerfectPixelで見本と合わせてズレの確認をする、、
というところまでは行ったのですが、この状態が正しいのか疑問に思いました。

こちら（別サイトリンク）の別のデザインカンプを配布している方の見本サイトを見てみると、元のデザインの横幅が1280pxですが、PCで表示してみるとtop画像の両端に無駄な余白が無くモニタサイズに合わせて最大限横に広がって表示されてるんですよね、、
↓参考画像

私のようにpsdの数値をそのまま当てはめた場合、モニタサイズによっては両端に余白ができると思うのですが、

何か読み取り不足やサイズ合わせ等の根本的な考え方が間違っているのでしょうか？

Answer 1

これはheaderデザインやサイトの構成
またコーディングされる方それぞれだと思いますが。。。

私の場合は、要素を置くためのinnerを作って
heder, main, footerは
画面一杯でも、最大幅指定でも
フレキシブルに使えるようにする事が多いですね

heder, main, footer{
  width; 100%;
}
.inner {
  width; 96%;
  max-width; 1200px;
  margin: 0 auto; 
}
以下略

カンプサイトでは
100%headerにbackgrandで画像を置いているのかな?
と思います

Comments

[K09]

ご回答ありがとうございます。
なるほど、指定サイズ以外のモニタ幅になった場合、フレキシブルに動くようにコーディングすることが多いんですね。
ただ試しにスーツのおじさん画像部分を横幅いっぱいの可変にしてみたところ余白は消えますが、大きいモニタで表示すると画像が横に伸びて比率が変わってしまったり、それ以外のどの要素を変動又は固定にすればいいかカンプからは分からなかったです。
1200pxの作成サイトを1680pxで表示させた際の挙動は、
本来はカンプ製作者に確認を取ろうということなのでしょうかね？

具体的なコードも書いていただき、ありがとうございました。

[-millmill-]

私はデザインからコーディングまで通しでやっているで確実ではないのですが。。

カンプを提出してコーディングする場合、
もちろんクライアントとの打ち合わせも重要ですが
クライアントは素人さんが多いので
「クライアントが気に入ったイメージをいかにWEB落とし込むのか」
ってのがコーダーの腕、ってか楽しさじゃないかと^^

>画像が横に伸びて比率が変わって

背景で使う際は background-size をかけます。
その上で
大きくなりすぎたheightをどこで切るか?
横はどこまで対応するのか?
余白をどう誤魔化すか?
などを考えてみると良いかと思います^^

[K09]

なるほど、、
web知識のない方との打ち合わせだったり、完璧なカンプデータがない場合も考慮して、
自分の経験や技量から上手い具合にお相手の理想に近付けて行くのも重要なのですね

お陰様で、一旦思うようにはなりました！

数日悩んでいたところ返信をくださり助かりました。。
本当にありがとうございました！