【Labs】CSSで関数が使えるって知ってました！？

こんにちは（・∀・）

前回の【CSS】CSSでも変数が使えるって知ってました⁉に続いて、知ってました⁉️シリーズ第２弾。

「CSSでcalc()関数が使えるって知ってました⁉️」です。

calc()関数

calc()関数でCSSの値に計算式を入れることができます。値に「calc()」を記述したら「()」の中に式を記述します。

E {
  width(プロパティー): calc(10px + 5px)(計算式);
}

数値だけではなく「%」や「vw」や「vh」などの相対値や「px」などの絶対値などの単位を含めることもでき、異なる単位同士で計算することもできます。

四則演算

計算式は四則演算で計算します。

注意点として、加算（+）と減算（-）の演算子の前後は必ずスペースで区切ります。

乗算（*）と除算（/）の演算子の前後のスペースは任意ですが、統一性を持たせる意味でもスペースで区切った方が良いと思います。

E {
  width: calc(10px + 5px);
}

calc()計算式のサンプルです。

.sample1 {
  width: calc(100vw + 20px);
}
.sample2 {
  width: calc(100vh - 20%);
}
.sample3 {
  width: calc(50% * 2);
}
.sample4 {
  width: calc(100px / 2);
}

計算順位

calc()関数の四則計算での優先順位は、
括弧「()」があれば、括弧「()」の中が最優先。
次に２乗や３乗などの累乗計算。
その次が「積」や「商」の計算(左から順)。
最後に、「和」や「差」を計算(左から順)。

次の例では1000px - 200 - 5という計算式になります。

E {
  width: calc(1000px - 10 * 20 - 10 / 2);
}

加算（+）減算（-）を優先させたい場合などに括弧「()」を使用します。

E {
  width: calc((1000px - 10) * (20 - 10) /2);
}

また、乗算（*）を使用する場合、１つは「数量」である必要があり、除算（/）を使用する場合、演算子の右の値が「数量」である必要があります。

calc()計算式の中にcalc()計算式を入れ子にすることもできます。

E {
  width: calc(1000px / calc(30% * 2));
}

が、単純な括弧「()」式と同じ意味になります。

E {
  width: calc(1000px / (30% * 2));
}

サンプルデモ

div.boxの横幅の計算を自動でお願いする。

.container{
  width: 100%;
  display: flex;
}
.container div{
  width: calc(100% / 3);
  height: 50px;
}
div.box1{
  background: lightblue;
}
div.box2{
  background: pink;
}
div.box3{
  background: lightgray;
}

Result

上の3つのdiv要素(box1〜3)は「calc()」関数で計算して横幅を出しています。

可変なので親要素の幅(ブラウザ幅)を縮めても横幅を再計算して表示してくれます。

レスポンシブデザインでのレイアウトにぴったりな関数ですね。

参考

【CSS初心者入門】calc関数とは何？使い方も解説！