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 プロパティやセレクタを逆引きできます。

Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome