CSS

Pick the biggest value from several size options so text and blocks never shrink below a comfortable minimum.

max()

複数のサイズ候補の中から“いちばん大きい値”を自動で選ばせて、文字やブロックが小さくなりすぎない“下限”をかんたんに守らせる道具。

やさしい説明

max() は「候補をいくつか見せて、いちばん大きい値を採用してね」とブラウザに頼むための道具です。

画面が小さくても文字が小さくなりすぎないようにしたり、カードの幅を“最低これだけは確保”したいときに使います。

正確な説明

構文
max(<length | number | percentage>, <length | number | percentage>, …)

渡した複数の値のうち、評価結果が最大のものを選びます。

互換のある型同士（例：px と rem、% と vw など）が比較対象になります。

いくつでも列挙できます
max(16px, 2vw, 1.2rem) のようにOK。

calc()・min()・clamp()と組み合わせても構いません。

使いどころ（よく効くパターン）

文字が小さくなりすぎ問題の回避
小画面でも可読サイズをキープしたい
カードやカラムの“最低幅”の確保
レイアウト崩れを抑えたい
余白の下限をキープ
見た目の間延び・詰まりを防ぐ

最短メモ（こう書けばOK）

文字

CSS

/* ビューポートが小さくても 16px 未満にしない */
.bodyText {
    font-size: max(16px, 2vw);
}

幅

CSS

/* 親の 50% を目安にしつつ、300px は必ず確保 */
.card {
    width: max(300px, 50%);
}

余白（パディング）

CSS

/* 画面に応じて増やすが、最低 1rem は確保 */
.section {
    padding: max(1rem, 2vh);
}

注意点（つまずきやすいところ）

単位の相性
比較できる“種類”同士で使うのが基本です（長さ同士、割合同士、数値同士）。
% の基準
% は親やコンテナのサイズを基準に解決されます。親のサイズが決まっていないと期待とズレることがあります。
欲しいのは“下限”か“上限”か：

min()・clamp()との違いを一言で

max(a, b)
大きいほうを採用（= 下限を作るのに便利）
min(a, b)
小さいほうを採用（= 上限を作るのに便利）
clamp(min, preferred, max)
範囲におさめる（下限と上限を同時に指定）

もう一歩（応用のヒント）

文字サイズを「読みやすい範囲」に固定したいなら

CSS

/* 16px 未満にせず、40px を超えない */
.title {
    font-size: clamp(16px, 4vw, 40px);
}

レスポンシブなグリッドの“最低幅”を死守

CSS

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(12rem, 25%), 1fr));
    gap: 1rem;
}

各カードが 12rem 以上で、可能なら広がるイメージ