CSSで計算ができるcalc()を使ってみよう

今まで、要素のサイズを指定するときなど、〇px分だけ引いてやりたい。そんなときありますよね。
でも、今までであればJavaScriptから毎回やったりととても大変ですよね。
ですが、なんと、CSSでだけで計算が可能なのです。
さらに詳しく見てみましょう。

ブラウザ別対応状況

Chrome:Chrome26よりサポート

Safari:Safari6.1, Safari7.0よりサポート

Firefox:Firefox16よりサポート

IE　　:IE9よりサポート

Ede　:サポート

Oprera:Opera15よりサポート

対応状況は、「ほとんどのブラウザの最新バージョンなら対応している」というところでしょうか。

webkitを使用しているSafariやGoogle Chromeなどは-webkitのベンダー識別子をつけるのがよいでしょう。

基本的にはこのように記述します。

.sample{
   width : -webkit-calc(50% - 20px);
   width : -moz-calc(50% - 20px);
   width : calc(50% - 20px);
}

ですが、最新ブラウザのみのアクセスとわかるのであれば、

.sample{
   width : calc(50% - 20px);
}

のように省略しても構いません。
もちろんwidth以外にもheightなどと利用できます。

減算を利用することが多いと思いますが、calcで利用可能な式を記述しておきます。

+　=　加算
-　=　減算
*　=　乗算
/　=　除算

となります。

どうだったでしょうか。

CSSもこんなことができるのか///と感じてしまいます。

このcalcはとても便利なものなのですが、対応していないブラウザ/バージョンから見るとサイトが崩れてしまうので「どのデバイスでも」というのならcalcは最低限にしたほうがいいかもしれません。