calc()を使ってCSSのサイズ指定を計算して出力する

みなさんはCSSのサイズ指定をする時に、細かい計算をしてサイズ指定をしていますか？
calc()は計算式を記述すればブラウザ側で計算して出力します。

しかもcalc()はIEを含むほとんどのメジャーブラウザに対応しているので、安心して使用できます。
また、計算は単位を揃える必要がなく、異なる単位間でも計算してくれるのでレスポンシブコーディングともとても相性がいいです。

それでは具体例を交えながら活用方法を紹介します。

calc()は加算、減算、乗算、除算を行うことができます

calc()は下記のように四則演算を行うことが可能です。

//加算
.hoge{
	width:calc(10px + 50px);
}
//減算
.hoge{
	width:calc(100px - 50px);
}
//乗算
.hoge{
	width:calc(100px * 50px);
}
//除算
.hoge{
	width:calc(100px / 50px);
}

さらにこの四則演算は異なる単位でも行うことが可能なので下記のような記述を行うことができます。

//加算
.hoge{
	width:calc(25% + 10px);
}
//減算
.hoge{
	width:calc(100% - 300px);
}
//乗算
.hoge{
	width:calc(10vw * 5);
}
//除算
.hoge{
	width:calc(100% / 7);
}

そしてこの四則演算を組み合わせた入れ子にも対応しています。

//四則演算の入れ子
.hoge{
	width:calc(100%/calc(calc(10 - 5)*2));
}

具体的な使用例

アマゾン風ナビゲーション

アマゾンのようにナビゲーションに固定幅を確保し、残りの部分をブラウザ幅に合わせて可変するようなボックスをサイズ指定する場合

//横幅300pxのナビゲーションを固定
.hoge{
	float:right;
	width:calc(100% - 300px);
}

ブラウザ幅に関係なく天地左右中央表示

これまでもマイナスマージンを使用すれば可能でしたが、calc()を使用すればマイナスマージンを使用せずに設定ができます。

//1辺300pxのボックスを天地左右を中央表示
.hoge{
	position:absolute;
	top:calc(50% - calc(300px / 2));
	left:calc(50% - calc(300px / 2));
}

マージン固定でのリキッドレイアウト

ボックス間のマージンは固定しつつ、ブラウザ幅に合わせてボックスを可変させる

//マージン20pxに設定して3つのブロックをブラウザ幅に合わせて均等に3等分の幅に設定する
.hoge{
	float:left;
	margin-left:20px;
	width:calc(calc(100% - calc(20px * 4)) / 3);
}

参考にしてみてください。