横幅や高さを「%」や「px」を指定してレイアウトする際に、「100%の幅から5px引いた幅にしたい…」や「コンテナを正確に三等分したい…」こともあるかと思います。
そのようなときは、CSSの「calc関数」を使うと簡単に指定することができます。
calcとは？
calcとは、CSSで「四則演算」が使えるようになる関数のことです。
使用できるのは、足す（+）、引く（-）、掛ける（*）、割る（/）の4種類です。
四則演算を用いて「幅（width）」や「高さ（height）」を指定することで、それぞれ計算して割り出していた数値（プロパティの値）を簡単に計算してくれます。
CSSのcalcに対応しているブラウザ
現在は、ほとんどのブラウザに対応していますが、IE9以前のバージョンはサポートされていませんので、ベンダープレフィックス（-webkit-）を付ける必要があります。
calcを使用できるプロパティ
calcはすべてのプロパティに使用できるわけではありません。
使用できるのは、すべてではありませんが、以下のようなプロパティとなります。
- width
- height
- margin
- padding
- border-width
- font-size
- text-shadow
- transform
- animation
- transition
これらは、length（距離）、frequency（周波数）、angle（角度）、time（時間）、 number（実数）、integer（整数）のデータ型の値になっています。上記以外にもこれらのデータ型の値であれば使用することができます。
calcの使い方
calcは、様々な使い方ができます。主な使用例をご紹介します。
calcの基本的な使い方
最も基本的なcalcの使い方は以下のようにします。例えば、100%幅を3等分した幅から「5px」だけマイナス（減算）した値が計算されます。
div {
width: calc(100% / 3 - 5px);
}上記のように、calc()の「()」の中に計算式を記述していきます。この際、「+、-」を使う場合は、半角スペースを挿入する必要があります。これは、例えば「-5px」とした場合、「負の値」と判断されるためです。「*、/」については、半角スペースは必要ありませんが、ソースの見やすさ、統一性を高めるために記述した方がよいでしょう。
入れ子にする
calcは入れ子にして使うこともできます。
div {
width: calc(300px * calc(3 / 2 ));
}ビューポートの単位（vw、vh）を使用する
ビューポートの単位であるvwやvhを使用して計算することもできます。例えば、画面幅の三等分の幅にする場合はこのようになります。
div {
width: calc(100vw / 3 );
}レスポンシブでレイアウトを組む際に使用することで、ソースコードの量を大幅に減らすことができます。
文字サイズに使用する
レイアウトだけでなく、文字サイズなどにもcalcを使用することができます。例えば、「画面幅に対して、一行に30文字表示する文字サイズにする」といったことができます。もちろん、マージンなどの影響は受けますので注意は必要です。
div {
font-size: calc(100vw / 30 );
}calcの計算の優先順位
calcの計算には「優先順位」があります。小学校で習う通り「加算(+)、減算(-)」よりも「乗算(*)、除算(/)」が優先されます。
div {
width: calc(100% - 5px / 10 );
}上記の場合、「100% – 5px」より先に「5px / 10」が計算されます。
括弧を使えば優先順位を変えられる
こちらも学校で習った通り、「括弧（）」を使えば、優先順位を変更することができます。
div {
width: calc((100% - 5px) / 10 );
}このようにすることで、「100% – 5px」を先に計算することができます。
理解するポイントまとめ
- calc関数は、CSSで「四則演算」が使えるようにする関数
- IE9以前のバージョンはサポートされていないためベンダープレフィックスが必要
- 「加算(+)、減算(-)」よりも「乗算(*)、除算(/)」が優先される
- 括弧を使うことで計算の優先順位を変更することができる