[CSS]レスポンシブ用のマージン指定、最小値と最大値を設定し、その間を変化させる実装テクニック
Post on:2016年10月20日
sponsors
ページをレスポンシブ対応にする時、デスクトップでは空白スペースを多めにとり、スマホでは少なめにして、スクリーンサイズに適したマージンを与えたい時があります。
マージンの最小値と最大値を設定し、その間の値を変化させる、ビューポートの単位（vw, vh）を使って実装するスタイルシートのテクニックを紹介します。
Responsive margins with min and max values
マージンがどんな感じに変化するか、見てましょう。
幅1200px, 800px, 480pxでデモページを表示したもので、上部のマージン（margin-top）が変化しているのが分かると思います。
マージンの最大値は15em、最小値は5em、その間の値はスクリーンサイズに応じて変化します。
実際の動きは、下記ページでご確認ください。
Responsive margins with min and max values
マージンの指定は、下記のようになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body { margin-top: 5em; } @media (min-width: 40em) { body { margin-top: calc( 5em + 10 * ( 100vw - 40em ) / (60 - 40) ); } } @media (min-width: 60em) { body { margin-top: 15em; } } |
「min-width: 40em」での計算式は最小値の5emに加算していくもので、その増加分をブレイクポイントの設定値の差で割り算して算出します。
最小値と最大値を設定し、その間の値を変化させるスタイルシートのテクニックについては、以前の記事で詳しく紹介しているので、参考にしてください。
sponsors
