calc()

style.css

/* 固定値同士の計算 */
div.hoge{
	width: 200px; /* サポートしていないブラウザの為 */
	width: calc(300px - 100px);
}

/* 親要素の幅から固定値を引く（レスポンシブで最もよく使うパターン） */
.main-content { width: calc(100% - 250px);}

/* マージンを含む計算 */
.three-col { width: calc(33.333% - 16px); margin: 8px;}

/* ビューポートから固定ヘッダー分を引く */
.page-body { height: calc(100vh - 60px);}

/* 四則演算の例 */
.add-example    { width: calc(100px + 50px);}   /* 加算 */
.sub-example    { width: calc(100% - 30px);}     /* 減算 */
.mul-example    { font-size: calc(1rem * 1.5);}  /* 乗算 */
.div-example    { width: calc(600px / 3);}       /* 除算 */

/* 古いChromeやSafariへの対応 */
.legacy { width: -webkit-calc(100% - 20px); width: calc(100% - 20px);}

値	概要
+	加算を行います。『+』と『-』の前後には必ず半角スペースが必要です。スペースがないと正しく計算されません。
-	減算を行います。
*	乗算を行います。引数の1つは『数量』である必要がありますのでご注意下さい。
/	除算を行います。右の引数は『数量』である必要がありますのでご注意下さい。

<div style="width: calc(300px - 100px); width: -webkit-calc(300px - 100px); background: #f00;">ここはdiv要素です。widthの数値を『300px - 100px』の演算結果『200px』にしてます。</div>

※ バージョン情報は MDN / Can I Use に基づいています。

※Android4系は4.4からサポートされているので、4.3以下では使用できません。

『calc()』を使用すると演算(計算)を行うことができます。

『calc()』で計算できる値は、『長さ』、『角度』、『時間』、『整数値』、そしてcss2.1から廃止されていますが『周波数』になります。

<div class="nagasa">ここはdiv要素です。widthの数値を『300px - 100px』の演算結果『200px』にしてます。</div>
<div class="kakudo">ここはdiv要素です。角度を『50deg - 40deg』の演算結果『10deg』にしています。</div>
<div class="jikan">ここはdiv要素です。アニメーションの時間を『5s - 3s』の演算結果『2s』にしています。</div>

/* 横幅を『300px - 100px』の演算結果『200px』にしています。 */
div.nagasa{
	width: calc(300px - 100px);
	width: -webkit-calc(300px - 100px);
	background: #F00;
}
/* 角度を『50deg - 40deg』の演算結果『10deg』にしています。 */
div.kakudo{
	width: 200px;
	background: #FF0;
	margin:40px 0;
	transform: rotate(calc(50deg - 40deg));
	-moz-transform: rotate(calc(50deg - 40deg));
	-ms-transform: rotate(calc(50deg - 40deg));
	-webkit-transform: rotate(-webkit-calc(50deg - 40deg));
}
/* 時間を『5s - 3s』の演算結果『2s』にしています。 */
div.jikan{
	width:200px;
	background: #0F0;
	-webkit-animation:hoge -webkit-calc(5s - 3s) infinite alternate;
	-moz-animation:hoge calc(5s - 3s) infinite alternate;
	animation:hoge calc(5s - 3s) infinite alternate;
}
@-webkitkeyframes hoge { 0%{margin-left:0px;} 100%{margin-left:50px;}}
@-mozkeyframes hoge { 0%{margin-left:0px;} 100%{margin-left:50px;}}
@keyframes hoge { 0%{margin-left:0px;} 100%{margin-left:50px;}}

『100 ÷ 3』の様に割り切れない数値も演算させることができます。

<div style="width:33.33%; width:calc(100% / 3); width:-webkit-calc(100% / 3); background: #f00;">ここはdiv要素です。widthの値に『100% ÷3 』の演算結果を指定しています。</div>

使用できる単位は『px』や『%』だけじゃなく『em』や『cm』なども使用可能で、異なる単位同士でも演算させることができます。また『calc()』内部でさらに『calc()』を使用することができます。

<div style="width: calc(100% - calc(10px + 10px)); width: -webkit-calc(100% - calc(10px + 10px)); background: #f00;">ここはdiv要素です。widthの値を『calc(100% - calc(10px + 10px))』の演算結果に指定しています。</div>