[CSS] calcとは？

CSSの記述にある、calcについて説明します。

[CSS] calcとは？

calcとは英語でcalculation の略で計算、演算という意味があります。

その名称からも想像できるように、計算式を入れ込みwidthの幅などを指定することができます。

.box{
    width: calc(100% - 100px);
}

例えば、上記の例では横幅100％から100pxを差し引いた分がboxクラスの横幅として算出されます。

マイナスだけでなく、例えば要素を全体から3分割にしたい場合は、以下のように記述できます。

.box{
  width: calc(100% / 3);
}