この記事のポイント
min()とmax()の使い方を初心者向けにやさしく解説- レスポンシブWebデザインで即使えるサンプルコード多数
clamp()との違いや組み合わせ方も詳しく紹介- 実務レベルの知識とTipsを交えた“現場で使える”構成
はじめに：CSSにも関数があるって知ってた？
CSSにもJavaScriptのような“関数的な書き方”ができるって、ご存知でしたか？
中でも最近注目されているのが、**min()とmax()**という関数です。
/* 中身の意味はこれだけ！ */
width: min(100%, 600px); /* 小さい方を使う */
font-size: max(1rem, 18px); /* 大きい方を使う */
この一文だけで、画面サイズに応じて自動で値を調整してくれるのです。
本記事では、CSSのmin()とmax()の基礎から、実践的な活用法まで、完全にマスターできる内容をお届けします。
1. min()とmax()の基本
min()とは？
min(a, b)
与えられた複数の値のうち、最も小さい値を採用します。
max()とは？
max(a, b)与えられた複数の値のうち、最も大きい値を採用します。
具体例で理解しよう
width: min(100%, 600px); /* 親の100%と600pxを比較し、狭い方を使う */
font-size: max(1rem, 18px); /* ユーザー設定の1remが18px未満なら、強制的に18pxにする */
2. min() / max() のユースケース5選
① カードUIの幅制御
.card {
width: min(90vw, 640px);
margin: 0 auto;
}
スマホでは 90vw（画面幅の90%）、PCでは 640px 以下に制限できます。
② 最小フォントサイズの保障
.text {
font-size: max(1rem, 16px);
}
デバイスによって 1rem が小さくなっても、16pxを下回らないように制御。
③ グリッドレイアウトの間隔調整
.grid {
display: grid;
gap: min(4vw, 24px); /* 最大24pxに制限 */
}
画面が大きくても gap が広がりすぎないように。
④ 画像サイズの上限指定
img {
width: min(100%, 500px); /* 小さい方を適用 */
height: auto;
}
モバイルファーストで大きすぎない画像レイアウトに。
⑤ min-width／max-widthにも使える！
.button {
min-width: max(120px, 10vw); /* 横幅が狭すぎないよう保障 */
}
サイズ制御に柔軟性が出て、見た目の破綻を防げます。
3. clamp()との関係と違い
clamp(min, preferred, max) とは？
min()とmax()を合体させたような関数- 「最低値」「理想値」「最大値」を1行で書ける
font-size: clamp(14px, 2.5vw, 20px);
画面が小さければ14pxに固定
理想は 2.5vw（画面幅2.5%）
大きくなりすぎないように最大20pxに制限内部的にはこう動く！
内部的にはこう動く！
min(max(14px, 2.5vw), 20px)
つまり、clamp()は min() と max() をセットで使ったものと同等。
ソースコード集：試して理解する！
以下は完全なHTML＋CSSのコピペ可能なサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>min() / max() サンプル</title>
<style>
.container {
width: min(90vw, 600px);
margin: 0 auto;
padding: 1em;
background: #f9f9f9;
font-size: max(1rem, 16px);
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>min() / max() デモ</h1>
<p>
このテキストは画面サイズに応じてフォントサイズが変化します。また、コンテンツの横幅は最大600pxに制限されています。
</p>
</div>
</body>
</html>
おすすめ：Chrome の DevTools でウィンドウサイズを変えながら効果を確認してみてください。
よくあるミスと注意点
| よくあるエラー | 解説 |
|---|---|
| 単位の混在 | min(500, 80%) はエラー！→ 必ず単位を揃えるか比較可能な単位を使う（px vs % OK） |
| カンマの忘れ | min(100% 600px) ←❌ → min(100%, 600px) ←✅ |
| IEは非対応 | 古いブラウザでは無視されるためフォールバックが必要なことも |
6. 対応ブラウザ（2025年最新版）
| 関数 | Chrome | Firefox | Safari | Edge | IE11 |
|---|---|---|---|---|---|
min() | ✅ | ✅ | ✅ | ✅ | ❌ |
max() | ✅ | ✅ | ✅ | ✅ | ❌ |
clamp() | ✅ | ✅ | ✅ | ✅ | ❌ |
基本的にはモダンブラウザは全対応しているので、安心して導入可能です。
7. 応用編：CSS変数 × min()で柔軟に
:root {
--container-max: 800px;
}
.main {
width: min(100%, var(--container-max));
}
テーマやブレイクポイントごとに変数を変えれば、より柔軟なCSS設計が可能になります。
まとめ：min()／max()は“デザインの守護神”
- 🟢 画面サイズに合わせて自動でサイズ調整できる
- 🟢 コードが簡潔で、読みやすく保守性も高い
- 🟢 実務でもバッジ、カード、フォーム、タイポグラフィなどにすぐ活用できる
- 🔴 IE11は非対応だが、現代では問題なし（フォールバック可）
これからは 「メディアクエリだらけのCSS」から卒業して、CSS関数で“賢いレイアウト制御”を実践してみましょう！
(Visited 3 times, 1 visits today)