CSScalc() 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer> が利用できる場所ならば使用できます。

/* プロパティ: calc(式) */
width: calc(100% - 80px);

構文

calc() 関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な演算子の優先順位の規則を使用します。

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

式のオペランドは任意の <length> 構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。

メモ

  • ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。
  • + 演算子と - 演算子は前後に空白文字をつける必要があります。たとえば、 calc(50% -8px) と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 calc(50% - 8px) はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 calc(8px + -50%) は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。
  • * 演算子と / 演算子には前後の空白文字は必要ありませんが、こちらにも空白文字を用い記述ルールに一貫性を持たせておくことは認められており、推奨されています。
  • 自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 auto が指定されたものとして扱います。
  • calc() 関数を入れ子にすることは許可されており、内側のものは単なる括弧として扱われます。

形式文法

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: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
<div class="banner">これはバナーです!</div>

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

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

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

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  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 変数

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() は単なる括弧と同等です。

アクセシビリティの考慮事項

calc() をテキストの大きさを制御するために使用するとき、値の一つに相対的な長さの単位を含むことを確認してください。

h1 {
  font-size: calc(1.5rem + 3vw);
}

これによって、ページが拡大縮小されたときにテキストの寸法が拡大縮小されます。

仕様書

仕様書 状態 備考
CSS Values and Units Module Level 3
calc() の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 26
完全対応 26
完全対応 19
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 ありFirefox 完全対応 16
補足
完全対応 16
補足
補足 Before Firefox 57 calc(1*2*3) is not parsed successfully.
補足 Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.
未対応 4 — 53
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 9Opera 完全対応 15Safari 完全対応 7
完全対応 7
完全対応 6
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android ? Chrome Android 完全対応 28Edge Mobile 完全対応 ありFirefox Android 完全対応 16
補足
完全対応 16
補足
補足 Before Firefox 57 calc(1*2*3) is not parsed successfully.
補足 Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.
未対応 4 — 53
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 21Safari iOS 完全対応 7
完全対応 7
完全対応 6
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
Gradient color stops supportChrome 完全対応 19Edge 完全対応 ありFirefox 完全対応 19IE 完全対応 9Opera ? Safari 完全対応 6WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 19Opera Android ? Safari iOS ? Samsung Internet Android ?
Nested calc() supportChrome 完全対応 51Edge ? Firefox 完全対応 48IE ? Opera ? Safari ? WebView Android ? Chrome Android 完全対応 51Edge Mobile ? Firefox Android 完全対応 48Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
<number> value supportChrome ? Edge ? Firefox 完全対応 48IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 48Opera Android ? Safari iOS ? Samsung Internet Android ?
<color> value supportChrome ? Edge ? Firefox 完全対応 59IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 59Opera Android ? Safari iOS ? Samsung Internet Android ?
Media query value supportChrome 完全対応 66Edge 未対応 なしFirefox 完全対応 59IE 未対応 なしOpera 完全対応 53Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 66Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 53Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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