CSS calc() 関数
CSS 関数例
calc() 関数を使用して <div> 要素の幅を計算する:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
試してみる »
定義と使用方法
calc() 関数は長さの値を動的に計算するために使用されます。
- 注意すべき点は、演算子の前後にはスペースを1つ入れる必要があることです。例：
width: calc(100% - 10px)； - 任意の長さの値は calc() 関数を使用して計算できます。
- calc() 関数は "+", "-", "*", "/" 演算をサポートします。
- calc() 関数は標準の数学演算の優先順位規則を使用します。
サポートバージョン: CSS3
ブラウザサポート
表内の数字は、その関数をサポートする最初のブラウザバージョン番号を示します。
"webkit" または "moz" または "o" で指定された数字は、その関数をサポートする最初のバージョン番号のプレフィックスです。
| 関数 | |||||
|---|---|---|---|---|---|
| calc() | 26.0 19.0 -webkit- |
9.0 | 16.0 4.0 -moz- |
7.0 6.0 -webkit- |
15.0 |
CSS 構文
calc(expression)
| 值 | 説明 |
|---|---|
| expression | 必須。数学式です。結果は演算後の戻り値になります。 |
フォームフィールドのサイズをコンテナのサイズに合わせて自動調整する
calc()もう一つの使用例は、適切なマージンを維持しながら、フォームフィールドのサイズが現在の利用可能なスペースに適合し、コンテナの端を押し出して超えないようにすることです。
以下の例では、form 要素自体がウィンドウの利用可能な幅の 1/6 を使用し、form 要素内の input 要素のサイズを適切に保つために、再び calc() を使用して、その幅をコンテナの幅から 1em 引いた値にしています。以下の
例
input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
試してみる »
その他の拡張