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 で使える単位は以下。
- %
- em
- ex
- ch
- rem
- vw
- vh
- vmin
- cm
- mm
- in
- px
- pt
- pc
意外と多いですね。