Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

calc()

『calc()』を使用すると演算(計算)を行うことができます。最新のChromeやsafariでは、ベンダープレフィックス『webkit』は必要ないですが、少し古いバージョンだと付ける必要があります。また『calc()』が使用できないブラウザのために固定値を指定してあげると良いです。

サンプルコード

div.hoge{
	width: 200px; /* サポートしていないブラウザの為 */
	width: calc(300px - 100xp);
	width: -webkit-calc(300px - 100xp); /* 古いChromeやsafariに対応させる為 */
}

指定可能な値一覧

値	概要
+	加算を行います。
-	減算を行います
*	乗算を行います。引数の1つは『数量』である必要がありますのでご注意下さい。
/	除算を行います。右の引数は『数量』である必要がありますのでご注意下さい。

ブラウザでの表示結果

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

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

※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 - 100xp);
	width: -webkit-calc(300px - 100xp);
	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>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル