コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

CSSにてスタイルシート内だけで値を数式で割り当てるcalcの使い方

逆引きのことばを言い換えて記事として残そうシリーズ

出典元

MDNには詳細な記述はないが、InternetExplorer9も部分対応している

記述例

全体の幅よりも20px小さくしたい場合

width: calc(100% - 20px);

このように数式を使って表現ができる。主にレスポンシブなどではこの書き方を用いることで変動する画面幅に対応している。

ありがちなトラブル

横幅を5分割したいなと割りたいなーと思って以下のような記述をする

width: calc(100% / 5);

こうするとIEのみ、小数点が切り上げられるので、5で割れない横幅のときにレイアウトが崩れる。

大本のレイアウトをどうするかにもよるが、このようなケースではcalcを使わないほうがよさそう(解決方法のヒントなどは参考リンク参照)

参考リンク