calcを使うとレスポンシブコーディングに便利

css3にはcalc（カルク）というものがあります。

このcalcを使えば便利で計算式で幅や高さを指定することができます。

calcの書き方

たとえば値と値をプラスした数値を指定することができます。

width: calc(10px + 10px);

上記は10pxと10pxを足した20pxが幅として指定されます。

もちろん（+）プラスだけでなく（-）マイナスや（*）乗算や（/）除法を使って計算することもできます。

width: calc(100% - 10px);

上記の書き方だと要素の幅100%がもし375pxだとするとそこから10pxを弾いた365pxが指定されます。

スマホの場合には画面の横幅も違うので画面100%に対して何ピクセルかを弾いた数値を設定したいときにこういった書き方もします。

calcは入れ子を利用することもできます。

width: calc(100% / calc(10px * 3));

上記の書き方だと100%を10pxを3でかけた値を割って計算をします。

このように複雑な演算子もできるのでレスポンシブコーディングではても便利だと思います。

ひと昔前ではcalcが使えないバージョンやブラウザなどもありましたが今ではだいぶ対応できるようになっているのでガンガン使えそうです。