もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

レスポンシブ設計において、@mediaだけに依存する時代は終わりつつあります。
CSS の比較関数 min()、max()、clamp() を使えば、値そのものに「条件」を埋め込み、より宣言的かつ柔軟にレイアウトを制御できます。
ここでは、それぞれの違いと使い分け、そして実務でそのまま使えるパターンを整理します。

min() — より小さい値を採用する

構文

min(value1, value2, ...)

挙動

引数の中から最小値を評価結果として返す。

代表的ユースケース

• コンテナ幅の上限制御
• 可変サイズの抑制

実装例①：最大幅を制限する

.container { width: min(90%, 1200px);}

ロジック（1200pxを超えないレスポンシブ幅）

• 画面が広い → 1200px
• 画面が狭い → 90%

実装例②：フォントサイズ制御

h1 { font-size: min(5vw, 48px);}

• 通常は viewport に比例
• 48px を超えない

max() — より大きい値を採用する

構文

max(value1, value2, ...)

挙動

引数の中から最大値を返す

実装例①：最小サイズ保証

.card { padding: max(2vw, 16px);}

ロジック（UIの可読性確保に有効）

• 小画面では 16px を確保
• 大画面では 2vw に拡張

実装例②：最低高さ保証

.hero { height: max(50vh, 400px);}

• 画面が小さくても 400px 確保
• 大画面では 50vh

clamp() — 最小値・推奨値・最大値を同時指定

最も強力かつ実務で多用される関数。

構文

clamp(min, preferred, max)

挙動

min ≦ 結果 ≦ max

• preferred が min 未満 → min
• preferred が max 超過 → max
• それ以外 → preferred

実装例①：流動的フォントサイズ（推奨パターン）

h1 { font-size: clamp(1.5rem, 4vw, 3rem);}

ロジック（モダンCSSでの流体タイポグラフィ標準実装）

• 小画面 → 1.5rem
• 中間 → 4vw に比例
• 大画面 → 3rem で固定

実装例②：レイアウト余白

.section { padding: clamp(1rem, 5vw, 4rem);}

視覚的イメージ

min()

値A —–
値B ———–
結果 → 小さい方

max()

値A —–
値B ———–
結果 → 大きい方

clamp()

min |—-可変範囲（preferred）—-| max

実務での最重要パターン

1. フルワイド＋中央固定レイアウト

.wrapper { width: min(100% - 2rem, 1200px); margin-inline: auto;}

2. 完全流動タイポグラフィ設計

:root { --fs-base: clamp(1rem, 0.5rem + 1vw, 1.25rem);}

body { font-size: var(--fs-base);}

計算式と組み合わせ

calc() と併用可能。

font-size: clamp(1rem, calc(0.5rem + 2vw), 2rem);

パフォーマンスへの影響

• レイアウト再計算時に評価される
• JavaScript不要
• モダンブラウザでネイティブ最適化

まとめ比較表

実務指針

• フォントサイズ → 基本 clamp()
• コンテナ幅 → min()
• 最低余白保証 → max()
• 可変レイアウト → clamp() + vw

ブラウザサポート状況

min(), max(), clamp() は以下で完全サポート済み

• Chrome 79+
• Edge 79+
• Firefox 75+
• Safari 14+

フォールバックが必要になるケース

• ① 企業イントラなどで旧Safari（14未満）を使っている
• ② 組み込みブラウザが古い
• ③ レガシー端末（古いAndroid WebView）

フォールバックを書く場合の実装パターン

h1 { font-size: 24px;}

@supports (font-size: clamp(1rem, 2vw, 2rem)) {
  h1 { font-size: clamp(1.5rem, 4vw, 3rem);}
}