paddingとcalcでブロックのセンタリング [necotech blog]

2017.3.7

セクションごとに横幅いっぱいの背景色がコロコロ変わるサイトを見てて、divの数が増えそうでやだなーと思ってたところでふと思いついたのでメモ。

.wrap {
  width: 1000px;
  margin: 0 auto;
}

.wrap {
  width: 100%;
  padding: 0 calc(50% - 500px);
  box-sizing: border-box;
}

横幅いっぱいがセクションやブロックの領域になり、backgroundをあてることができるので、ブロックのネストを少なくできるケースがある。昨今のダイナミックなデザインには構造的にしっくりくることが多い気がする。

~~calcの段階でピクセルに端数が出てしまい、ぴったり1000pxにならない。もしかしたら致命的かもしれない。~~ [2018/10 追記]ちゃんと計算してくれるぽい。普通に使える。

あとデメリットというほどではないけど、直接の子要素にposition: absolute;をあてる時に計算が少し複雑になる、と思う。ひとつブロックを挟んでやれば解決だけど、構造的意味のないdivが必ず必要になるような場合は、そもそも従来の方法(margin: 0 auto;)でやればいいと思う。

necotech