Widely available 安心して使用可能。すべての主要ブラウザで長年サポートされている。

calc() function

calc() は CSS の関数で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 <length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer>、<color-function> の値が利用できる場所ならば使用できます。

関数計算

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
calc
26
12
16
7
28
7
gradient color stops

グラデーションカラーストップのサポート
19
12
19
6
28
6
nested

ネストされた `calc()` のサポート
51
16
48
11
51
11
number values

`<number>` 値のサポート
31
12
48
6
31
6
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (19)
注釈 5件
実装メモ
  • Firefox 59 より前では、`calc()` は `rgb()` およびその他のカラー関数ではサポートされていません。
  • Firefox 57 より前では、「calc(1*2*3)」は正常に解析されません。
  • Firefox 57 では、「calc()」で別の値を置き換えることができる場所の数が増加しました。 バグ 1350857 を参照してください。
削除済み
  • このバージョンで機能が削除されました (53)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (4)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (6)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (6)

基本構文

CSS 
.sidebar-layout {
  /* Allocate the remaining width to the main content after subtracting the sidebar width */
  width: calc(100% - 250px);
}

.centered-box {
  /* Centered in the viewport */
  margin-top: calc(50vh - 200px);
}

.fluid-padding {
  /* Minimum 16px, expands based on viewport width */
  padding: calc(1rem + 2vw);
}

ライブデモ

100% - Lockwidth

calc() function 100% - lockwidth demo.

プレビュー全画面表示

Rem + Vw blend

calc() function Rem + vw blend demo.

プレビュー全画面表示

putchild. Calculation

calc() function putchild. Calculation demo.

プレビュー全画面表示

実務での使いどころ

  • レイアウト計算

    固定幅のサイドバーを差し引いた残りの幅をメインコンテンツに割り当てる。

  • レスポンシブな余白

    remとvwを組み合わせて、画面サイズに応じた流動的なパディングを設定する。

注意点

  • 演算子（+、-）の前後にはスペースが必須。calc(100%-20px) はエラーになる。

アクセシビリティ

  • calc() で算出したフォントサイズが小さくなりすぎないよう、最小サイズに配慮する。

参考リンク