[CSS] calc( ) の使い方

#calc( ) とは？
CSSのcalc( )関数は、プロパティの値を計算式で実行することができます。
単位を揃える必要はなく、px, %, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できます。
レスポンシブ対応のWebサイトなどを制作するのに便利です。

calcは calculation = 計算 の略です

#使い方
##ルール
1, 計算式内では四則演算（加算、減算、乗算、除算）が使用できます。
2, 常に演算子（+, -, *, /）をスペースで区切らなければいけません。
3, 入れ子が使用できます。

##calc( )の使用例
###ある要素の幅を親要素の1/3にしたい時
calc()関数を使わないと、 width: 33.33333% などと指定すると思います。
calc()関数を使用すると以下のように指定することができます。

css

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

##カラムのデザインで、一方の幅が固定、もう一方が可変の時
.box 内の ボックスitem1 を150pxで固定、 ボックスitem2 は可変で横並びが崩れない状態で配置したい時に、calc()関数を使用すると以下のように指定することができます。

css

.box{
  width:100%;
}

.item1{
  width:150px;
}

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

##入れ子を使う書き方

css

.item {
    width: calc(100% / calc(100px / 2));
}

上記以外にも工夫すれば色々使うことができます。