レスポンシブデザインでコーディングする時って、横3列とか4列とかでボックスを並べると思いますが、正直計算して並べるのって、面倒だと思いませんか?

最近のブラウザで使えるCSS3では何と計算ができます!

普通レスポンシブで横3列に並べる時って、

[code language=”css”]
.col3{
width:33.3333%;
}
[/code]

こんな感じですよね。
ここにさらにボックスの両端を10pxずつmarginをあけたい時ってどうしますか?
【width:33.3333%-20px】とかできたら最高ですよね!

そこで使えるのが、【calc】です。

[code language=”css”]
.col3{
width:calc(100%/3-20px);
}
[/code]

こんな便利な指定ができます!かなり便利です。

ただ、未だに使っている人が多いらしい【AndroidOS 4.2】などは対応していません。もちろんIE8も。まあいつものことですが。
Webkitの指定などもしておいた方がいいですね。
Webkitの指定を入れると、

[code language=”css”]
.col3{
width:-webkit-calc(100%/3-20px);
width:calc(100%/3-20px);
}
[/code]

こんな感じです。