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
<calc()>Chrome 完全対応 26
完全対応 26
完全対応 19
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 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 完全対応 37
完全対応 37
完全対応 37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 28Edge Mobile 完全対応 12Firefox 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 完全対応 14Safari iOS 完全対応 7
完全対応 7
完全対応 6
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
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 ?
Gradient color stops supportChrome 完全対応 19Edge 完全対応 ありFirefox 完全対応 19IE 完全対応 9Opera ? Safari 完全対応 6WebView Android 完全対応 37Chrome Android 完全対応 28Edge Mobile 完全対応 ありFirefox Android 完全対応 19Opera Android ? Safari iOS ? Samsung Internet Android ?
Nested calc() supportChrome 完全対応 51Edge 完全対応 16Firefox 完全対応 48IE 未対応 なしOpera ? Safari ? WebView Android 完全対応 51Chrome Android 完全対応 51Edge Mobile 未対応 なしFirefox Android 完全対応 48Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
<number> value supportChrome ? Edge 完全対応 12Firefox 完全対応 48IE 完全対応 9Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 12Firefox Android 完全対応 48Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

関連情報

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

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