PSDファイルでデザインが規定されている場合の、レスポンシブデザインを実装する手順について


See the Pen used レスポンシブ by nakanishi (@nakanishi) on CodePen.

PSDファイルでデザインが規定されている場合、大きく分けて2つの実装パターンがある。

1つは全ての要素の「幅、高さ」をPSDファイルで指定されたpxで固定するパターンで、その場合、ラッパーのマージンがAUTOで変化する。つまり画面幅の変化に対して、「追従して変化するのは」ラッパーのマージンだけ、ということになる。(またラッパーに対してmin-width: –px で、それ以上小さくならないように指定することも多い。) これはユーザーのブラウザ横幅が、ある一定値よりも大きいほうでバリエーションが多いことを想定できる場合、つまりPC版で主に使われる。(900pxとか970pxとか1200pxとか、比較的大きい幅で見る人が多いであろう状況)

このパターンの実装は比較的容易で、各要素の幅をPSDファイルで指定されたpxに設定し、マージンも規定されたpxで設定すればよい。(特に画像パーツの幅、高さは全て指定してよい)

次に2つめのパターンとして、スマートホン版等、どんな横幅でも同じ見た目にするには、全ての要素を%で指定する。

このパターンの場合、width を指定すれば、margin: auto は効く。ただしposition: absolute、relative 等を設定した場合、margin: auto は効かない。しかし、margin-left: –% も left: –% も効く。そのため、中央に配置したい場合は、left: 23%等、マージン幅の全体に占める割合を指定することで配置する。

また画像そのものをレスポンシブにするには次の記事を参照

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です