mozilla
Your Search Results

    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: sosleepy, ethertank
    最終更新者: sosleepy,
    サイドバーを隠す