CSS

Pick the smallest value from your size options so layouts don’t grow too big, giving you an easy upper limit for widths, text, and spacing.

min()

いくつか候補のサイズを並べて“いちばん小さい値”だけを採用する関数。画面が広くても『ここまで』で止めたい時に使う安全ブレーキ。

まずはやさしい説明（直感のつかみ）

min() は、小さいほうを選ぶ関数です。

たとえば「画面に合わせて広がるけど、1200pxより大きくしない」みたいな上限ストッパーを一行で書けます。

画面幅に応じて伸び縮みさせたいけど、大きくなりすぎる崩れを防ぎたい時に役立ちます。

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

CSS

/* 画面の90%まで広がるけど、1200pxを上限にする */
.container {
    width: min(90vw, 1200px);
}

もう少しだけ詳しく（よく使う実例）

レイアウト幅の上限

CSS

.main {
    width: min(92vw, 1200px);
    margin-inline: auto;
}

フォントサイズの上限

CSS

.title {
    font-size: min(5vw, 2rem);
}

画面が小さい時は 5vw で文字も少し小さく、でも大画面で巨大文字になりすぎないよう 2rem を上限に。

余白（マージン / パディング）を伸びすぎないように

CSS

.card {
    padding: min(4vw, 24px);
    margin-block: min(6vw, 48px);
}

画面が広いほど余白も増やしたいけど、最大値は決めておく。

正確な説明

min(A, B, C, …) は、引数の中から最小の計算結果を返します。

単位は混在してOK（vw と px と rem を同時に比較できる）で、CSSが同じ“長さ”として比較できるものなら一緒に並べられます。

値は式として評価され、calc() や var()、clamp() などとも組み合わせ可能です。

CSS

.wrapper {
    width: min(100% - 2rem, 1200px, calc(95vw - 32px));
}

使いどころ（パターン集）

レスポンシブな最大幅
流動的に広げつつ、崩れない上限を決める
読みやすさの担保
フォントや行間が大画面で大きくなりすぎないように
余白のバランス
余白が間延びしすぎるのを防ぐ
画像・カード
カードや画像の比率を保ちつつ予想外の巨大化を抑える

min()・max()・clamp() の頭の整理

min(a, b)
小さいほうを採用（＝上限を作る道具）
max(a, b)
大きいほうを採用（＝下限を作る道具）
clamp(min, ideal, max)
理想値を下限～上限の間に挟み込む（上下の両ガード）

例：タイトル文字を「理想 5vw、でも 1.25rem～2remの間に」

CSS

h1 {
    font-size: clamp(1.25rem, 5vw, 2rem);
}

よくある勘違い・落とし穴

「最小＝いつも小さくなる」ではない
min() は候補の中の最小を選ぶだけ。画面が狭ければ vw が小さくなり、それが最小になりやすい。広いときは px の固定値が最小になることも。
負の値やゼロ
引数に計算の結果負の値が混ざると、意図せずそれが採用され、0未満で崩れることも。レイアウト系では負の値にならない書き方を心がける。
calc() との違い
calc() は四則演算、min() は比較して一つを選ぶ。必要に応じて組み合わせるのが定石。
単位が比較できないもの
たとえば「色」や「キーワード値」など長さに換算できないものは比較できません。

仕上げの実用スニペット（貼ってすぐ効く）

CSS

/* ページ幅：画面に合わせて伸ばすが 1200px で止める */
.page {
    width: min(92vw, 1200px);
    margin-inline: auto;
}

/* 見出し：小さな画面では流動、大きな画面では 2rem を上限に */
.page h1 {
    font-size: min(6vw, 2rem);
}

/* 余白：広い画面でもダラっと空きすぎない */
.section {
    padding-block: min(8vw, 64px);
    padding-inline: min(6vw, 48px);
}