小金井にあるWEB制作会社の備忘録

MEMORANDUM

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);
}

関連ページ