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() 内での計算には以下の式が利用可能。

+加算
–減算
*乗算（引数の少なくとも1つは「数量」でなければならない）
/除算（右の引数は「数量」でなければならない）

また、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

意外と多いですね。