吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【レスポンシブコーディング】縦方向のマージンをパーセント指定

2014年9月19日 / category : その他

レスポンシブサイトが流行りだして2年くらいでしょうか。
ディレクターが1人で設計をするのはまだまだハードルが高いのかな、という印象を受けます。
レスポンシブサイトは、コーディング目線に立たないとなかなかうまい感じに設計できないと思いますので、そこはもうあきらめてコーディング担当者と一緒に設計をすべきです。
と、小さい声でずっと言い続けています。

例えば、次のようなレイアウトがあるとします。

これが320pxの画面サイズだとした場合、640pxまで画面サイズを伸ばしたら、どういうレイアウトになれば良いか。
(あ、ちなみに、ブレイクポイントを640pxとした場合です。)

これが理想的なレスポンシブ対応されたレイアウトです。
簡単そうに見えますが、キャプチャのレイアウトがかなり簡易的なデザインのためです。
実際のwebサイトのデザインでは、これがなかなか難しいようです。
たまに見かけるのが、次のようなレイアウトです。

画面サイズを伸ばすと、要素全体がそのまま拡大してしまうレイアウト。
これはあまりお勧めできないレスポンシブレイアウトです。
でも、たまに見かけます。

または、こういう状態にしなければいけない設計になってしまっているデザインだったり。

でも、この仕様でコーディングをしなければいけない、という場合。
縦方向のマージン関係も画面横幅に合わせて拡大縮小する必要があります。
そんな時、どのような計算をし、cssを設定するか。

まずは、DEMOから。

DEMO

ブレイクポイントを640pxに設定しているので、画面横幅を640px以下に縮めて確認してみてください。
縦方向のマージンが良い感じに拡大縮小されます。
ちなみに、2つの要素の間のマージンは、画面横幅が320pxの時に、20pxになるようにパーセント指定をしています。
ですので、画面横幅が640pxの場合は、マージンは40pxになります。

考え方は、前回の記事と同じです。
http://tsudoi.org/weblog/?p=2949

画面横幅が320pxの時に、マージンが何pxになるか確認します。
DEMOの場合は、320pxの時に、20pxにしています。
この2つの数値を使ってマージンのパーセントを算出します。

margin = 20px / 320px * 100 = 6.25%

6.25%と出ました。
この数値を、cssのmarginに設定します。

他の要素のマージン対しても、同じような計算をします。
例えば、「要素」のテキスト画像のpaddingもこの計算でパーセントを算出します。

ただ、このようなレスポンシブサイトのコーディングは稀だと思いますので、あまり実務的ではありません。

レスポンシブサイトを設計する場合は、ぜひ、次のような設計で・・・。