css calc()で長さを計算して求める | このコードわからん

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

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

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

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

#main{
  width: calc(1000px - 10px);
  width: -webkit-calc(1000px - 10px);
}

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

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

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

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

%
em
ex
ch
rem
vw
vh
vmin
cm
mm
in
px
pt
pc

こんなに使わねーー！

コメント