css calc()で長さを計算して求める

calc()というもので、CSSで計算させることができるようになってたらしい。
sassとか使うわけじゃなく、ナチュラルなcssです。

たとえば、以下のようにすると、

1
2
3
#main{
  width: calc(1000px - 10px);
}

とすると、#mainのwidthは990pxになります。
chromeではまだプレフィックスが必要のようなのでつけておきます。

1
2
3
4
#main{
  width: calc(1000px - 10px);
  width: -webkit-calc(1000px - 10px);
}

「こんなもん使い所あんの?」
って感じなんだけど、calcの凄いところは単位が違っても計算できるってところ。
なのでたとえば、%に対してpxの計算をするっていう使い道もでてくる。

1
2
3
#main{
  width: calc(80% - 10px);
}

こりゃあ確かにcalc使わないとできないで。

ちなみに、cssで指定できる単位はこれだけあるらしい。

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

こんなに使わねーー!

参照 :
http://www.w3.org/TR/2012/WD-css3-values-20120308/

1 thought on “css calc()で長さを計算して求める

コメントは停止中です。