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

意外と多いですね。