calc

概要

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

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

構文

calc(expression)

値

expression

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

式

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

+

加算

-

減算

*

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

/

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

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

例

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

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>

仕様

ブラウザ実装状況

関連情報

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