【CSS3】計算式が使える［css calc］の使い方。

CSS で縦横の長さを設定する際、四則計算が使えることは知っていましたか？

これは［calc()］というプロパティで実装でき、しかも［SASS］や［LESS］などのメタ言語を使わない単独のCSSです。

例えば、「横幅に「パーセンテージ値」を用いつつ、その横幅から指定ピクセル分を引く」といった複雑な計算が可能で、このテクニックを覚えるとウェブ・デザインの表現の幅がグンと広がります。

#wrap {
width:calc(100% - 10px);
}

例えば上記のようなコードの場合だと、#wrap の横幅は、ボックスの最大幅（100%）から10ピクセル分を引いた長さになります。

width、margin、padding、font-size、border-width、background-position、text-shadow、transform:rotate()など、CSS内で＜長さ＞、＜周波数＞、＜角度＞、＜時間>＞、＜数量＞、＜整数値＞ のいずれかの値を用いる場所ならどこでも使用可能です。

calc() 内での計算には以下の式が利用可能。

また、calc() 内部で別の calc() を用いるといった複雑な方程式も可能です。

ちなみに CSS で使える単位は以下。

1. %
2. em
3. ex
4. ch
5. rem
6. vw
7. vh
8. vmin
9. cm
10. mm
11. in
12. px
13. pt
14. pc

意外と多いですね。