任意のマージン比率で
margin: auto;風の挙動を実現！
コンテンツの左右のmarginが微妙に違う時のレスポンシブ対応に困ってませんか？
この記事では、要素の左右マージン比率を自由に調整し、margin: auto;の配置に似た挙動を実現する方法をご紹介。
実現したい挙動は、
max-width:1200px;
margin:auto;
padding:0 16px;
上記のソースのように、画面幅が狭まるに連れて左右のmarginが自動的に減少し、コンテンツの幅が1200pxまで来たら、幅が減少していくような挙動。(paddingは、縮小時にコンテンツが画面端に密着するのを避けるため）
しかし、左右のmarginが異なっている場合、任意値のmarginを指定してしまうと、marginが減少しません。
calc()を利用してmargin: auto;風
下記のソースで実現します。
左右で、2:3の比率の場合。
.box {
max-width: 1200px;
margin-left: calc((100% - 1200px) * 2 / 5);
margin-right: auto;
}
簡単解説
calc((100% – 1200px) * 2 / 5) は、「画面全体の幅から1200ピクセルを引いた値の2/5」を計算しています。
(100% – 1200px)←これで左右のmarginの合計となる部分が出ますね！
そして、その左右のmargin合計を5で割って2をかけるという、比率の計算をするだけです。
簡単な例…
親要素の幅が1600pxだと仮定すると、
(100% - 1200px) * 2 / 5
= (1600px - 1200px) * 2 / 5
= 400px * 2 / 5
= 160px
となります。これが左側のマージンの幅になります。右側のマージンも同様に計算され、結果として左右のマージンが2:3の比率で調整されたレスポンシブなデザインが得られます。
まとめ
画面幅に合わせて、marginを増減させることができるので便利ですね。
出番は少なそうですが、覚えていて損はなさそうです！
