mozilla

calc

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

CSS の calc() 関数は、<length><周波数><角度><時間><数量><整数値> のいずれかの値を用いる場所ならどこでも使用可能です。 calc() を用いる事により、対象のサイズや形状を決定する値の計算が可能となります。

calc() 内部で別の calc() を用いる事も可能です。

構文

calc(expression)

expression
<length> 値として使用される値の計算式。

式には以下の演算子を組み合わせた単純式を用いる事が出来ます。FIXME: mod、min、max についての記述が無い。

+
加算
-
減算
*
乗算。引数の少なくとも1つは <数量> でなければなりません。
/
除算。右側は <数量> でなければなりません。

式のオペランドは任意の長さの構文値にする事ができます。また、異なる単位同士の計算(※例: calc(100% - 20px) など)も可能です。計算順序は通常の四則演算に則っており、計算順序を決定する為に括弧を用いる事も出来ます。

注記: 0 による除算は、HTML パーサーによってエラーとなります。
注記: + 演算子と - 演算子は常に前後に半角スペースをつけて記述しなければなりません。なぜなら 8px を引く意図で calc(50% -8px) と記述した場合、 50%-8px が並んでいるものとして解釈され、無効な式となるからです。 calc(50% - 8px) としなければなりません。
* 演算子と / 演算子には前後の半角スペースは必要ありませんが、これらにも半角スペースを用い記述ルールに一貫性を持たせておく事は認められており、推奨されています。

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

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

.banner {
  position:absolute;
  left: 40px;
  width: 90%;                        /* calc()に非対応のブラウザ用 */
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}
<div class="banner">This is a banner!</div>

フォーム項目のコンテナへの自動フィット

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

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

input {
  padding: 2px;
  display: block;
  width:  98%;              /* calc()に非対応のブラウザ用 */
  width:  calc(100% - 1em);
}

#formbox {
  width:  130px;            /* calc()に非対応のブラウザ用 */
  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>

仕様

仕様書 策定状況 コメント
CSS Values and Units Module Level 3 勧告候補  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート

19 (WebKit 536.3) -webkit
26

4.0 (2) -moz
16 (16)
9 - 6 -webkit (buggy)
gradient プロパティの位置指定での使用 19 (WebKit 536.3) -webkit
27 (おそらく26)
19 (19) 9 - 6 -webkit (buggy)
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? 4.0 (2) -moz
16.0 (16)
? ? ?
gradient プロパティの位置指定での使用 ? 19.0 (19) ? ? ?

関連情報

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

Contributors to this page: ethertank, sosleepy
最終更新者: sosleepy,
サイドバーを隠す