min(), max(), clamp()

概要

min() は引数の中で最も小さい値を、max() は最も大きい値を返す。clamp(min, preferred, max) は推奨値を最小値と最大値の範囲に制限する。レスポンシブなフォントサイズや幅の設定に特に有用で、メディアクエリなしで流動的なサイズ調整が実現できる。

対応ブラウザ

基本構文

.container {
  /* 最大幅を1200pxに制限 */
  width: min(100% - 2rem, 1200px);
}

.heading {
  /* 流動的なフォントサイズ（24px〜48pxの範囲） */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

.card {
  /* 最低300pxを確保 */
  width: max(300px, 30vw);
}

実務での使いどころ

• 流動的タイポグラフィ

  clamp() でビューポート幅に応じてフォントサイズが滑らかに変化し、上限・下限も保証する。

• レスポンシブコンテナ

  min() でコンテナ幅に上限を設け、小さい画面では全幅に広がるレイアウト。

注意点

アクセシビリティ

• clamp() でフォントサイズを制限する際、ユーザーがブラウザでズームした場合に文字が十分に拡大されるか確認する。

参考リンク

• MDN Web Docs — clamp()
• Can I use — clamp()