逆引きのことばを言い換えて記事として残そうシリーズ
出典元
MDNには詳細な記述はないが、InternetExplorer9も部分対応している
記述例
全体の幅よりも20px小さくしたい場合
width: calc(100% - 20px);
このように数式を使って表現ができる。主にレスポンシブなどではこの書き方を用いることで変動する画面幅に対応している。
ありがちなトラブル
横幅を5分割したいなと割りたいなーと思って以下のような記述をする
width: calc(100% / 5);
こうするとIEのみ、小数点が切り上げられるので、5で割れない横幅のときにレイアウトが崩れる。
大本のレイアウトをどうするかにもよるが、このようなケースではcalcを使わないほうがよさそう（解決方法のヒントなどは参考リンク参照）
