MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

CSS の calc() 関数は、<length><frequency><angle><time><number><integer> のいずれかの値を用いる場所ならどこでも使用可能です。calc() を用いることにより、対象のサイズや形状を決定する値の計算が可能となります。

calc() 内部で別の calc() を用いることも可能であり、内部の関数は単なる括弧 () であるとみなされます。

構文

/* property: calc(expression) */
width: calc(100% - 80px);

expression
計算結果を値として使用する計算式。

式には以下の演算子を組み合わせた単純式を用いることができます。これらの演算子は標準的な優先順位を使用します:

+
加算
-
減算
*
乗算。引数の少なくとも 1 つは <number> でなければなりません。
/
除算。右側は <number> でなければなりません。

式のオペランドは任意の長さの構文値にすることができます。また、異なる単位同士の計算 (※例: calc(100% - 20px) など) も可能です。計算順序を決定するために括弧を用いることもできます。

注記: 0 による除算は、HTML パーサーによってエラーとなります。
注記: + 演算子と - 演算子は常に前後にホワイトスペースをつけて記述しなければなりません。なぜなら 8px を引く意図で calc(50% -8px) と記述した場合、50% と -8px が並んでいるものと解釈され、無効な式となるからです。calc(50% - 8px) はパーセンテージ、減算記号、長さの順に並んでいるものと解釈されます。また、calc(8px + -50%) は長さ、加算記号、負のパーセンテージの順に並んでいるものと解釈されます。
* 演算子と / 演算子には前後のホワイトスペースは必要ありませんが、こちらにもホワイトスペースを用い記述ルールに一貫性を持たせておくことは認められており、推奨されています。
注記: 自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、auto が指定されたものとして扱います。

形式文法

calc( <calc-sum> )

where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

余白をつけてオブジェクトを画面に配置する

calc() はマージン設定を持つボックス配置を容易にします。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は 40 ピクセル空けます。

.banner {
  position: absolute;
  left: 5%;                 /* calc() に非対応のブラウザー用 */
  left: calc(40px);
  width: 90%;               /* calc() に非対応のブラウザー用 */
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}
<div class="banner">This is a banner!</div>

フォーム項目のコンテナーへの自動フィット

calc() のもうひとつの用途は、フォーム要素のサイズ変更です。妥当なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。

いくつかの CSS を見てみましょう。

input {
  padding: 2px;
  display: block;
  width: 98%;               /* calc() に非対応のブラウザー用 */
  width: calc(100% - 1em);
}

#formbox {
  width: 130px;             /* calc() に非対応のブラウザー用 */
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

ここで、フォームはウィンドウの取り得る幅の 1/6 を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 calc() を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います:

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

入れ子の calc() と CSS 変数

以下のコードをご覧ください:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

すべての変数が展開された後、widthC の値は calc( calc( 100px / 2) / 2) になります。この値が .foo の width プロパティに割り当てられるとき、内部にあるすべての calc() は (入れ子の深さにかかわらず) 単なる括弧になり、width プロパティの値は最終的に calc( ( 100px / 2) / 2)、すなわち 25px になります。要するに、calc() の内部にある calc() は単なる括弧と同等です。

仕様

仕様書 策定状況 コメント
CSS Values and Units Module Level 3
calc() の定義
勧告候補  

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 19 -webkit
26
4.0 (2) -moz
16 (16)[1]
9 ? 6 -webkit[2]
7
gradient プロパティの色で使用 19 -webkit
26
19 (19) 9 ? 6 -webkit[2]
7
calc() の入れ子 51[3] 48 (48) ? ? ?
<number> 値のサポート ? 48 (48) ? ? ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? 4.0 (2) -moz
16.0 (16)[1]
? ? 6 -webkit
7
gradient プロパティの色で使用 ? 19.0 (19) ? ? ?
calc() の入れ子 51[3] 48 (48) ? ? ?
<number> 値のサポート ? 48 (48) ? ? ?

[1] 非標準の接頭辞付きプロパティ -moz-calc() のサポートは Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) で廃止しました 。

[2] WebKit 6.0 では実装が誤っています。

[3] Chromium bug 600113 をご覧ください。

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, mrstork, prayash, sosleepy, ethertank
 最終更新者: yyss,