CSSで値を計算式で指定する方法

CSSのcalc()関数を使えば、横幅や高さに指定する値を計算式で記述することができます。

calc()関数について

calc()関数で使用できる演算子は+（加算）、-（減算）、*（乗算）、/（除算）です。かけ算やわり算が基本的に先に計算され、「（）」を使用して計算順序が指定できるなど、ルールは通常の計算と同じです。

加算と減算の場合は演算子の前後に半角スペースを必ず入れなくてはなりません。乗算と除算の場合は前後の半角スペースはあってもなくても正常に動作しますが、加算減算と同じく演算子の前後に半角スペースを入れることを意識しておくと記述ミスが少なくなるでしょう。

また、乗算を使用する場合は少なくとも１つは「数量」でなくてはならない、除算を使用する場合は演算子の右の値が「数量」でなくてはならないという決まりもあります。

calc()関数の基本的な記述方法

calc()を実際使用する際には、単位が違った複雑な計算が簡単にできるという点でとても便利になります。

例えば「横幅を全体の80%よりもさらに20pxだけ狭くしたい」と思ったときに下記のように記述して指定することができます。

他にも電卓などでは割り切れないときなどにもcalc()を便利に使用することができます。

例えば「ボックスを全体の３等分にして均等に並べたい」というとき、電卓で計算をすると割り切れず「width:33.33%」と中途半端な値になり、若干の隙間ができてしまったりします。

しかし下記のように記述すれば自動的に「33.3333…%」と計算され、隙間なく並べることができます。

ただcalc()に対応していない環境用に、念のため大体の数値を記述したフォールバックも用意しておくとよいでしょう。