CSS3 Pre-Reference



calc()

長さを計算する

試す

コード

#containe p {
  width: 100%;
  width: calc(10em + 5px*2 + (1*1ex) - (5em mod 4));
  width: -moz-calc(10em + 5px*2 + (1*1ex) - (5em mod 4));
  width: -webkit-calc(10em + 5px*2 + (1*1ex) - (5em mod 4));
}

サンプル

幅が10em程度になっていれば正解です。

9em + 10px + 1ex

コメントする


対応ブラウザ

Firefox
4~
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
まだ

パラメータ

レベル 3
参考文献 CSS3 Values and Units#3.7.4. The 'calc' function

解説

長さの計算式を指定します。

計算結果を値として利用します。JavaScriptのeval()と似たようなものです。使える演算子は、+ (加算)・- (減算)・* (乗算)・/ (除算)・mod(剰余)の5つ。

ですが、こちらは自由に計算が出来るわけではなく、色々な制限が付きます。基本的に、最終的には長さの単位でなければなりません。ですので、長さ同士のかけ算・割り算はできませんし、数字同士のかけ算・割り算もできません。つまり、単位の差し引きをして最終結果として単位が1乗であれば正しいです。理系の人には分かりやすいかも知れません。

×calc(1 + 12px);/* 数字のみの値が入っているのでNG */
×calc(1.5 * 18);/* 単位がないのでNG */
×calc(14 / 5pt);/* 結果の単位がpt-1になってしまうのでNG */
calc(12em - 12px);/* 単位の違うものが混じっているのはOK */
×calc(15pt mod 7em);/* 結果の単位が数値だけになってしまうのでNG */

画面幅の半分の幅を利用したり(calc(1vw/2))、幅一杯から少しマージンを取ったり(calc(1vh-20px))といった事ができます。

Firefoxの4で実装されると話題になっていました。

トラックバック

投稿されたコメント