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 変数

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

.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() の定義
勧告候補 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

26

19 -webkit-

あり

161 2

4 — 53 -moz-

915

7

6 -webkit-

Gradient color stops support19 あり199 ?6
Nested calc() support51 ?48 ? ? ?
<number> value support ? ?48 ? ? ?
<color> value support ? ?59 ? ? ?
Media query value support66 なし59 なし53 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ?28 あり

161 2

4 — 53 -moz-

21

7

6 -webkit-

あり
Gradient color stops support ? ? あり19 ? ? ?
Nested calc() support ?51 ?48 ? ?5.0
<number> value support ? ? ?48 ? ? ?
<color> value support ? ? ?59 ? ? ?
Media query value support なし66 なし なし53 なし なし

1. Before Firefox 57 calc(1*2*3) is not parsed successfully.

2. Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.

関連情報

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

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