CSS Reference

clamp()

上限と下限を決めた上で中央値を適用する

clamp() 関数は、引数にカンマ区切りで、「最小値」、「中央値」、「最大値」の 3つを指定しておくことで、算出値に応じ最小値と最大値の範囲内において、「中央値」を適用することができる CSS 関数です。

中央値が最小値よりも小さくなってしまう場合は「最小値」が、中央値が最大値よりも大きくなってしまう場合は「最大値」がそれぞれ適用されます。

calc() 関数と同様に、四則計算（加算（+）、減算（-）、乗算（*）、除算（/））を使用することもでき、プロパティの値として、<length>（長さ）、<frequency>（周波数）、<angle>（角度）、<time>（時間）、<percentage>（%）、<number>（数値）、<integer>（整数） 型の値が許容される場所であれば使用できます。

clamp()のサンプルソース

.sample {
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}
/* clamp() 関数に対応していない Safari では、下記のように記述することで「サンプルソース01」と同じ効果を得られます */
.sample {
  font-size: max(12px, min(10 * (1vw + 1vh) / 2, 100px));
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ×
iOS Safari ×
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome