サイトを作成する際、デザインをご用意頂く事があります。
ご依頼時に確認させて頂いておりますが、サイズを指示して頂ける事が少ないため、このようなブログを書きました。
以前に横幅1,600pxで作成されたデザインファイルを資料として渡して頂き、「コンテンツ幅は1,500px」にして欲しいと言われました。
その時、以下のようなデザインファイルだった場合どう受け取るでしょうか？
「コンテンツ幅が1,500px」という依頼であれば、私の場合通常は②を1,500pxで作成し、①はブラウザサイズ100%で作成しますが、たまに意図が違っている場合があります。
お客様によっては「①を1,500pxで作成して欲しかった」という場合もありました。
そこで以下のように指定して頂けるととても助かります。
デザインに書き込まなくてもいいのですが、目視出来た方がより分かりやすく手間も省けるかと思います。
NEWSの部分は最大幅が1,500pxですので、ブラウザサイズが1,501px以上の場合は左右に余白が表示されます。
逆にブラウザサイズが1,500px以下になると左右の余白が表示されなくなりますので、余白を表示したい場合は「コンテンツ幅はMax1,500px～Min600pxで、96％で内包して欲しい」というようにお伝え頂ければと思います。
ディスプレイサイズが1,500pxの時、NEWSの背景が白い部分は1,500pxの96%、1,440pxで表示され、左右に30pxずつの余白が作成されます。
ブラウザサイズが600pxの時は576pxになり、左右に12pxずつの余白が設けられます。
またコンテンツが横並びになっている時は、そのコンテンツ幅が固定なのか、ブラウザサイズによって可変とするのか指示頂けますととても助かります。
上記の例の場合では、1,500pxに対し横幅350pxのコンテンツを4個並べるとなりますので、横並びコンテンツ同士の余白は自動計算となります。
(1,500px - (350px × 4)) / 3 = 25
コンテンツ同士の余白は25pxとなります。
この場合、ブラウザサイズが1,499px以下になった場合に余白が狭まる事によって横並びコンテンツの横幅を維持します。
350px × 4 = 1,400px以下のブラウザサイズになった場合、横並びコンテンツが見切れてしまいますので注意が必要となります。
逆に、コンテンツ同士の余白を20px固定にしたい。という指定も可能です。
(1,500px - (20px × 3)) / 4 = 360
この場合は横並びコンテンツの横幅は360pxとなります。
この場合、ブラウザサイズが1,499px以下になった場合に横並びコンテンツの横幅が狭まる事によって横並びコンテンツ同士の余白幅を維持します。
フレキシブルレイアウトで私が推奨している方法はこちらになります。
ご不明な点があればお問い合わせください。
またこれはこのような指定をして頂けたら有難いという私の要望ですので、ご依頼時に作成サイズは確認させて頂いておりますのでご安心ください。
