CSSのmin()・max()・clamp()を使ってみる

値の最小値や最大値の設定ができる、CSS関数のmin()・max()・clamp()をそれぞれ使ってみます。

対応ブラウザ

対応ブラウザはこちらで、主要なブラウザで特に問題なくサポートされています。

min()

min()は指定した複数の値のうち、最も小さい値が使用されます。
例として、フォントサイズの例で表示を確認してみます。

<p class="sample">サンプルテキスト</p>

4vwと36pxを指定してみます。

.sample {
  font-size: min(4vw, 36px);
}

この場合は4vwと36pxのうち小さい値が使用されますが、4vwが画面幅に応じて可変なのに対して36pxは固定サイズになるので、基本的には4vwが適用されつつ、36pxより大きくはならないようになります。
min()のデモページ

max()

max()は指定した複数の値のうち、最も大きい値が使用されます。
先ほどと同様に、フォントサイズの例で表示を確認してみます。

.sample {
  font-size: max(4vw, 24px);
}

この場合は基本的には4vwが適用されつつ、24pxより小さくならないようになります。
max()のデモページ

clamp()

最後にclamp()ですが、値の上限と下限を設定できます。
最大で3つの引数をとり、clamp(最小値, 推奨値, 最大値)のような指定になります。

先ほどと同様に、フォントサイズの例で試してみます。p>

.sample {
  font-size: clamp(24px, 4vw, 36px);
}

この場合は基本的には4vwで可変サイズになりつつ、最小値が24px、最大値が36pxという設定になります。
clamp()のデモページ

今回はfont-sizeで試しましたが、paddingやmargin、width、topやleftなどいろいろな箇所で使用が可能です。