CSSのcalcを使いこなす

2020年12月13日2021年4月10日CSS

レスポンシブ対応にするときや、HSLで色を指定するときなどで、計算が煩雑になる場合があります。
それは往々にして、計算する際に単位が異なっていることがあるからです。(％とpx）など。

calcは、単位が違う値でも計算することができる便利なものです。
さっそくcalcの使い方をマスターして、便利な計算をしてみましょう。

calcの使い方

widthが100%でそれぞれの要素の間に20pxスペースを開けたいとします。
しかし、単位が違うから、上の式のように計算できません。
そこでcalcを使います。

calcの使い方は、今回のケースでいうと、widthにcalcの計算式をいれるだけです。

  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>

.box1 {
  background-color: orange;
  /* width: 100px; */
  width: calc((100% - 40px) / 3);
  height: 100px;
}

.box2 {
  background-color: skyblue;
  /* width: 100px; */
  width: calc((100% - 40px) / 3);
  height: 100px;
  margin: 0 auto;
}

.box3 {
  background-color: tomato;
  /* width: 100px; */
  width: calc((100% - 40px) / 3);
  height: 100px;
  margin-left: auto;
}

これで100%とpxで単位が違うのだけれども、計算してくれます。