【CSS】calc計算の使い方!計算式のやり方で柔軟に対応できる!

calcの基本的な書き方

calc計算は四則演算全て出来るようになっています。
・足す = 「+」
・引く = 「-」
・掛ける = 「*」
・割る = 「/」
これらを使用し計算できるようになっています。
以下簡単な使用例です。※全てwidthが200pxになるように計算しています。

/* 足し算 */
.box1 {
	width:calc(150px + 50px);
}

/* 引き算 */
.box2 {
	width:calc(250px - 50px);
}

/* 掛け算 */
.box3 {
	width:calc(100px * 2);
}

/* 割り算 */
.box4 {
	width:calc(400px / 2);
}

px指定以外にも使えます

上記は簡単な計算ですが、px指定外にも%やvw指定にも使えます。自分で計算する必要がなくレスポンシブでの指定に最適です。

/* liを均等に5つに並べたい場合に使えます */
li {
	width:calc(100% / 5);
	float:left;
}

widthしか指定していませんが、heightやmargin・padding、fontなど様々なものに使えるんです。

応用した使い方

もっと複雑な計算にも使えます。calc計算は入れ子で使用できます。
例えば、上記のようなliを横並びにする際に、li同士20pxの余白をあけたい場合は以下のように書けます。

li {
	width:calc((100% - 80px) / 5);
	float:left;
}
li:not(:last-child) {
	/* 最後のli要素以外に適用 */
	margin-right:20px;
}

widthしか指定していませんが、heightやmargin・padding、fontなど様々なものに使えるんです。

注意点

入れ子にした際にwidth:calc((100% - 80px) / 5);のように100%の値を指定すると、IEやEdgeの一部で100%を超えてしまいカラム落ちしてしまう場合があります。
これは、計算式で出た値の合計が100%を超えてしまうためです。入れ子にした際には100%ではなく下記のように99.9%にすると回避出来ます。
0.1%の値はあまり肉眼では認知できない場合も多いですが、ぴったりとしたレイアウトの際は目立つ場合もあるので注意して下さい。

li {
	width:calc((99.9% - 80px) / 5);
	float:left;
}
li:not(:last-child) {
	/* 最後のli要素以外に適用 */
	margin-right:20px;
}