calc()を使ってみる

CSSのプロパティの値を計算式で指定できるcalc()を使ってみます。

対応ブラウザ

対応ブラウザはこちら
一部対応していない機能もありますが、IE9/iOS6/Anroid4.4以降で使用できるようです。

サンプルコード

要素を上下左右中央位置に配置してみます。

HTML

<div class="sample"></div>

CSS

.sample {
	position: absolute;
	top: calc(50% - 200px);
	left: calc(50% - 300px);
	width: 600px;
	height: 400px;
	background: #666666;
}

上下左右中央位置に配置するデモページ
　

幅の指定を100%から一定値だけ縮小させてみます。

HTML

<div class="sample"></div>

CSS

.sample {
	width: calc(100% - 40px);
	height: 50px;
	margin: 0 auto;
	background: #666666;
}

幅指定のデモページ
　

要素を等分に分割してみます。

HTML

<ul class="sample">
	<li></li>
	<li></li>
	<li></li>
</ul>

CSS

.sample li {
	float: left;
	width: calc(100% / 3);
	height: 200px;
	background: #666666;
}

等分に分割するデモページ
　

サイドバーの幅を固定して、残りの幅をメインコンテンツの幅にしてみます。

HTML

<div id="contents">
	<div id="main"></div>
	<div id="sub"></div>
</div>

CSS

#contents {
	max-width: 960px;
	margin: 0 auto;
}
#main {
	float: left;
	width: calc(100% - 200px - 20px);
	height: 500px;
	background: #666666;
}
#sub {
	float: right;
	width: 200px;
	height: 300px;
	background: #cccccc;
}

サイドバーの幅のみ固定のデモページ