calcとは
calc()とは，プロパティの値を指定する際に計算式を使うことが出来る関数のことです。
単位を揃える必要はなく，px，%，rem，vwなどの相対単位でも，異なる単位の計算式で値を指定することができます。
これは，レスポンシブ対応の時に非常に便利な点です。
なお，calcは calculation（計算）の略称です。
使い方
- 計算式では，四則演算（加算+，減算–，乗算*，除算/）が使用できます。
- 演算子（+，-，*，/）を半角スペースで区切ります。※乗算や除算の式では，半角スペースで区切ることは必須ではありません。
- 単位を用いた加算や減算は，必ず単位のある数値同士で計算します。
- 乗算や除算として用いる値は，単位を付けてはいけません。
- 入れ子でも使用できます。
calcの使用例
widthを指定
例えば，「width: calc(100% – 50px);」と設定してみましょう。
これは，ページの横幅100％から50pxを引いた値を表しています。
そうすると，ブラウザのウインドウ幅を変えても，常に横幅100％から50pxを引かれた状態になっています。
font-sizeを指定
ビューポートに対する文字の大きさをcalcで調整してみましょう。
今回は「font-size: calc(100vw / 30);」と設定します。
calcで設定したことにより，ブラウザのウインドウ幅を変えても常に設定した割合で文字の大きさが変化しています。
また，100vw÷30=3.333…vwのような割り切れない値を計算式で指定することができるのは非常に嬉しいですね。
入れ子を使う
.box {
width: calc(100% - calc(100vw / 20));
}まとめ
calcを使うことによる主な利点は以下の3つです。
コメント