【CSS】最大値や最小値を設定する方法

min()

使い方

min()は()内に記述された値のうち、最小の値を設定します。

width: min(100vw, 100px);

上記の場合には100vwと100pxのうち小さい方の値が設定されます。

max()

使い方

max()は()内に記述された値のうち、最大の値を設定します。

width: max(100vw, 100px);

上記の場合には100vwと100pxのうち大きい方の値が設定されます。

clamp()

clamp() は CSS で値を 最小値・推奨値・最大値 の範囲内に収めるための関数です。

clamp() の基本構文

clamp(minimum, recommended, maximum)

• minimum：最小値。これより小さくはならない。
• recommended：推奨値。通常はこちらが適用される。
• maximum：最大値。これより大きくはならない。

例

.card {
  width: clamp(200px, 50vw, 400px);
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 8px;
}

• ビューポート幅が狭いときは最低幅 200px
• 推奨は画面幅の 50%
• 広大な画面では最大幅 400px