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);
}

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

整数での使用

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

関連情報