CSSで計算する〜calc() | IT工房

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

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

使用方法

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

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

HTMLコード

<div class="contents">
  <p><a href=""><img src="images/bnr.png" width="217" height="70"  alt=""/></a></p>
  <p><a href=""><img src="images/bnr.png" width="217" height="70"  alt=""/></a></p>
  <p><a href=""><img src="images/bnr.png" width="217" height="70"  alt=""/></a></p>
  <p><a href=""><img src="images/bnr.png" width="217" height="70"  alt=""/></a></p>
</div>

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

CSSコード

.contents{
      width:958px;
      margin:auto;
      background:#ccc;
      overflow: hidden;
}

.contents p{
      float:left;
      margin-right: calc((958px - (217px*4))/3);
 }
.contents p:last-child{
      margin-right:0;
 }

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