【CSS】Calc関数

★Calc関数とは
・通常CSSコーディングでコンテンツのサイズ指定をする場合はpxや%で指定するが、CSS3より実装されたCalc()関数ではプロパティ値を計算式で求めることができる。
・使用できる演算子は以下
　四則計算・・・加算(+)、減算(-)、乗算(*)、除算（/）のみ
・使用できる型は以下
　length型、frequency型、angle型、time型、number型、integer型

上記以外での使用はできない。
また、異なる単位を数値として計算式に記述することも可能。

Calc関数の記述方法

testcss1{
  width: calc(50%/2 -4*2px - 2*1em);
}

注意点
・Calc関数内で、「-」や「+」を使用する場合は必ずスペースが必要となる。(「/」や「*」では不要)

・Calc()関数内に入れ子としてCalc関数の記載も可能

Calc関数の入れ子

testcss2{
  width: calc( 50%/ calc(20em*2));
}

上記の場合は以下と同等の式となる

Calc関数の入れ子結果

testcss2{
  width: calc(50%/(20em*2));
}