解 説

CSSの値を計算することができるcalc()ファンクションの紹介です。IE8は当然ダメで、それ以外はOpera Miniと一部Androidを除くと使えます。
使用可能なブラウザはこちらです。

CSSの幅や高さの計算やフォントサイズの計算にも使えます。

使用方法

四則演算をすることができます。
実例で見ていきましょう。

フロートで横並びにするサンプル
4つのバナーを横並びにする簡単な例です。p要素に対してフロートをかけて横並びにしています。
それぞれのバナーの間隔は両端は親要素にぴったりとくっつけて、それぞれのバナーの間隔は均等にしたいと考えています。
p要素のmargin-rightの値をcalc()ファンクションを使用して算出しています。
calc()ファンクションは複雑な入れ子状態の計算も可能です。

HTMLコード

「+」と「-」の前後には半角スペースを入れないと正しく機能しませんので注意してください。
演算子の前後に半角スペースを入れておくようにすれば混乱しないと思います。

calc1

CSSコード

用途としては、計算の過程を残しておきたい場合や、割り切れない値(10/3など)に使用すると良いでしょう。