min(), max(), clamp()
clamp() は CSS の関数で、中央の値を定義された下限値と上限値の範囲内の値の範囲内に制限します。この関数は、最小値、推奨値、および最大許容値の 3 つの引数を取ります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 79 | 79 | 75 | 13.1 | 79 | 13.4 | |
| max() は CSS の関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 max() 関数は <length>、<frequency>、angle、<time>、<percentage>、<number>、<integer> が使用できるところならばどこでも使用することができます。 | 79 | 79 | 75 | 11.1 | 79 | 11.3 |
| min() は CSS の関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 min() 関数は <length>、<frequency>、angle、<time>、<percentage>、<number>、<integer> が使用できるところならばどこでも使用することができます。 | 79 | 79 | 75 | 11.1 | 79 | 11.3 |
基本構文
CSS
.container {
/* Limit maximum width to 1200px */
width: min(100% - 2rem, 1200px);
}
.heading {
/* Fluid font size (range of 24px to 48px) */
font-size: clamp(1.5rem, 4vw, 3rem);
}
.card {
/* Ensure a minimum width of 300px */
width: max(300px, 30vw);
}ライブデモ
実務での使いどころ
-
流動的タイポグラフィ
clamp() でビューポート幅に応じてフォントサイズが滑らかに変化し、上限・下限も保証する。
-
レスポンシブコンテナ
min() でコンテナ幅に上限を設け、小さい画面では全幅に広がるレイアウト。
注意点
- clamp() の第1引数が第3引数より大きい場合、第1引数（最小値）が優先される。
- ブラウザの最小フォントサイズ設定により、clampの最小値が無視される場合がある。
アクセシビリティ
- clamp() でフォントサイズを制限する際、ユーザーがブラウザでズームした場合に文字が十分に拡大されるか確認する。