calc()

試してみましょう

width: calc(10px + 100px);

width: calc(100% - 30px);

width: calc(2em * 5);

width: calc(var(--variable-width) + 20px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">幅を変更してください</div>
</section>

:root {
  --variable-width: 100px;
}

#example-element {
  border: 10px solid black;
  padding: 10px;
}

構文

/* calc(式) */
calc(100% - 80px)

/* CSS 関数を用いた式 */
calc(100px * sin(pi / 2))

/* 変数を含む式 */
calc(var(--hue) + 180)

/* 相対色の色チャンネルに用いた式 */
lch(from aquamarine l c calc(h + 180))

calc() 関数は、引数として単一の式を取り、その式の結果が CSS プロパティの値として使用されます。この式において、オペランドは、以下の一覧に掲載されている演算子を使用して結合することができます。式に複数のオペランドが含まれる場合、 calc() は標準的な演算子の優先順位のルールを使用します。

+

指定されたオペランド同士を加算します。

-

第 2 オペランドを第 1 オペランドから減算します。

*

指定されたオペランド同士を乗算します。

/

左側のオペランド（被除数）を右側のオペランド（除数）で除算します。

<number> 型以外のオペランドにはすべて、px、em、% などの適切な単位文字列を接尾語として付ける必要があります。 式内の各オペランドに異なる単位を使用することができます。また、必要に応じて括弧を使用して計算順序を指定することもできます。

解説

calc() について、いくつか留意すべき点があります。これについては、この節で詳しく説明します。

結果の値

calc() 関数は、以下のいずれかの型の完全な CSS 値の代わりに配置する必要があります。

• <length>
• <frequency>
• <angle>
• <time>
• <flex>
• <resolution>
• <percentage>
• <number>
• <integer>
• <length-percentage> のような複合型のいずれか

calc() は、パーセント値、長さ値などの数値部分のみを置き換えることはできません。その後に続く単位も置き換える必要があります。例えば、 calc(100 / 4)% は不正な式ですが、 calc(100% / 4) は正しい式です。

calc() の結果の値は、それが使用されているコンテキストと互換性がある必要があります。例えば、 margin: calc(1px + 2px) は有効ですが、 margin: calc(1 + 2) は無効です。これは、 margin: 3 を指定することと同じであり、その結果、プロパティは無視されます。

<integer> が期待される場合、 calc() 式は <number> として評価され、最も近い整数に丸められます。したがって、 calc(1.4) は値 1 を返します。値の小数点以下の桁数が正確に 0.5 の場合、値は正の無限大に向かって丸められます。例えば、 calc(1.5) は値 2 となり、 calc(-1.5) は -1 に丸められます。

calc() は、 IEEE-754 標準に従う浮動小数点演算を実行するため、 infinity および NaN の値についていくつかの注意事項が あります。定数のシリアル化の詳細については、 <calc-keyword> ページを参照してください。

入力の注意事項

• calc() は内在的なサイズの値、例えば auto や fit-content では計算を行うことができません。代わりに calc-size() 関数を使用してください。
• * 演算子と / 演算子には前後のホワイトスペースは必要ありませんが、一貫性のために追加することが推奨されています。
• calc() 関数は入れ子にすることができ、この場合、内側のものは単なる括弧として扱われます。
• 自動レイアウトと固定レイアウトの表の両方において、表の列、表の列グループ、表の行、表の行グループ、表のセルの幅と高さにパーセント値を含む数式は、 auto が指定されているかのように扱われる場合があります。
• + および - 式の構文の詳細については、 <calc-sum> を参照してください。

CSS 型付き演算

calc() で値を乗算する場合、* 演算子を使用する際は、単位を含む値は 1 つだけである必要があります。200px * 4px のような計算は対応していません。CSS において 800px² は無意味な値となるためです。

逆に、200px / 4px は 50 と評価され、これは CSS において意味を成します。したがって、calc() 関数で数値を除算する際に / 演算子を使用する場合、対応しているブラウザーでは、オペランドの両辺に単位を指定することができます。ただし、それらが同じデータ型であることが条件です。例えば、100vw / 1px は有効であり、単位のない値を返します。

この商は、<number> を値または引数として受け入れるプロパティや関数の値として使用できるほか、型付き値を乗算することで別のデータ型に変換することも可能です。

CSS における型付き算術演算の完全な説明と例については、CSS 型付き演算の使用を参照してください。

相対色における色チャンネルの計算の対応

calc() 関数は、相対色のコンテキスト内で色チャンネルを直接操作するために使用することができます。これにより、rgb()、hsl()、lch() などの色モデルにおける色チャンネルの動的な調整が可能になります。

相対色の構文は、いくつかの色チャンネルキーワードを定義しています。それぞれのキーワードは、色チャンネルの値を <number> として表します（詳細については、チャンネル値は <number> 値に解決されるを参照してください）。 calc() 関数では、これらの色チャンネルキーワードを使用して、色チャンネルを動的に調整することができます。例えば、 calc(r + 10) などです。

形式文法

<calc()> = 
  calc( <calc-sum> )  

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

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

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

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

アクセシビリティ

calc() を使用してテキストの大きさを制御する場合は、一方の値が相対的な長さの単位になることを確認してください。

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

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

• MDN WCAG のを理解する 1.4 の解説
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

例

マージンをつけてオブジェクトを画面に配置する

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() のもう 1 つの使用例は、適切なマージンを維持しながら、フォームフィールドがコンテナーの端からはみ出さずに、利用可能な空間に確実に収まるようにすることです。

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

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

#form-box {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

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

<form>
  <div id="form-box">
    <label>何か入力:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>

入れ子の calc() と CSS 変数

calc() で CSS 変数を使用することもできます。以下のコードを見てみてください。

.foo {
  --width-a: 100px;
  --width-b: calc(var(--width-a) / 2);
  --width-c: calc(var(--width-b) / 2);
  width: var(--width-c);
}

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

相対色における色チャンネルの調整

calc() 関数を使用すると、色チャンネル値を変数として格納する必要なく、相対色の個々の色チャンネルを調整することができます。

例えば、下記では最初の段落で <named-color> を使用しています。 その後の段落では calc() を rgb() および hsl() 関数と組み合わせて使用することで、元の名前付き色に対する各色チャンネルの値を相対的に調整しています。

<p class="original">元のテキスト色は rebeccapurple</p>
<p class="increase-hue">色相を 80 増加</p>
<p class="increase-lightness">明度を 20 増加</p>
<p class="decrease-lightness">明度を 10 減少</p>

p {
  font-family: monospace;
  font-size: 16px;
}

.original {
  color: rebeccapurple;
}

.increase-hue {
  color: lch(from rebeccapurple l c calc(h + 80));
}

.increase-lightness {
  color: lch(from rebeccapurple calc(l + 20) c h);
}

.decrease-lightness {
  color: lch(from rebeccapurple calc(l - 10) c h);
}

相対色を導き出すために calc() 関数を使用する例については、相対色を使用するページの「数学関数の使用」の節を参照してください。

仕様書

ブラウザーの互換性

関連情報

• <calc-sum>
• <calc-keyword>
• CSS 関数
• A Complete Guide to calc() in CSS (CSS-Tricks)