CSS「calc」を使って計算式で実装する

表示する画面幅に合わせて可変するデザインを制作する際に「display:flex」を使ってレイアウトすることが多いが、配置した要素に余白を確保したい場合など必要以上にHTMLタグの生成が必要となる場合がある。
ここで「calc」を使うとを前述のHTMLタグの生成を抑えることができる場合もあるため使い方をメモ。

flexの使い方が知りたい方はページ下部 「関連ページ」を参照

CSS

.sample {
	width : -webkit-calc(100% - 30px) ;
	width : calc(100% - 30px) ;
}

使用できる計算式

計算式	説明	使用例
+	加算	calc(100% + 30px)
–	減算	calc(100% – 30px)
*	乗算（引数の1つは数量にする）	calc(100% * 3)
/	除算（右の引数は数量にする）	calc(100% / 3)

複数の計算式を兼用することも可能。
計算式内に括弧（）を使うことで一般的な数式と同様に計算することが可能。
「px」「%」以外に「vw（vh）」、「em（rem）」にも使える。

.sample {
	width : -webkit-calc(((100% - 40px) / 3 ) * 0.5 + 5px);
	width : calc(((100% - 40px) / 3 ) * 0.5 + 5px);
}

• CSSで計算式を可能にするcalc()ファンクション

関連ページ

• CSS「display:flex」で「clearfix」を使わずに要素を並べる。