CSS calc() 関数

定義と使用方法

CSSの calc() 関数が計算を実行し、結果を属性値として使用します。

例

使用 calc() <div> 要素の幅を計算する：

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}

実際に試してみる

CSS 语法

calc(expression)
値 説明
expression

必須。数学の式で、結果が値として使用されます。

以下の演算子を使用できます：+、-、*、/。

技術詳細

バージョン： CSS3

ブラウザのサポート

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
26 9 16 7 15

関連ページ

参考：CSS acos() 関数

参考：CSS asin() 関数

参考：CSS atan() 関数

参考：CSS atan2() 関数

参考：CSS cos() 関数

参考：CSS exp() 関数

参考：CSS hypot() 関数

参考：CSS log() 関数

参考：CSS mod() 関数

参考：CSS pow() 関数

参考：CSS sin() 函数

参考：CSS sqrt() 函数

参考：CSS tan() 函数