calc()
======

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

試してみましょう
--------

構文
--


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


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

`+`

加算です。

`-`

減算です。

`*`

乗算です。引数の少なくとも 1 つは `<number>` でなければなりません。

`/`

除算です。右側は `<number>` でなければなりません。

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

### メモ

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

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


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


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

* MDN WCAG のを理解する 1.4 の解説
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
整数での使用
------

**`calc()`** は `<integer>` が求められる場面で使用することができ、その値は次のように、最も近い整数に丸められます。


```css
.modal {
  z-index: calc(3 / 2);
}
```


これによって最終的に `.modal` は `z-index` の値は 2 になります。

**メモ:** Chrome ブラウザーでは現在のところ、整数が求められる場面で **`calc()`** から返される一部の値を受け付けません。例えば、結果が整数になる場合であっても割り算は受け付けません。すなわち、 `z-index: calc(4 / 2);` は受け付けられません。

例
-

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

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


```css
.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;
}
```



```html
<div class="banner">これはバナーです！</div>
```

### フォームフィールドの大きさを自動的に隅に合うように調整

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

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


```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 を使います。


```html
<form>
  <div id="formbox">
    <label>何か入力:</label>
    <input type="text" />
  </div>
</form>
```

### 入れ子の `calc()` と CSS 変数

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


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

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-func |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog