min-width / max-width を理解すると「伸び縮みするレイアウト」が自在に扱える
min-width / max-width は、ボックスモデルの中でも レスポンシブ設計の核になるプロパティです。
「要素が小さくなりすぎないようにする」「大きくなりすぎないようにする」など、
画面サイズに応じて自然に伸び縮みする UI を作るために欠かせません。
CSS と Tailwind CSS の両方で、初心者でも迷わず使えるように丁寧に解説します。
min-width と max-width の基本
min-width：これ以上小さくならない“下限”を決める
.box {
min-width: 200px;
}
要素が縮もうとしても 200px より小さくならない。
max-width：これ以上大きくならない“上限”を決める
.box {
max-width: 600px;
}
画面が広くても 600px 以上には広がらない。
深掘り：width と min/max の優先順位
優先順位は次の通りです。
min-width > width > max-width
つまり、width を指定していても min-width が勝ちます。
例
width: 100px;
min-width: 200px;
→ 実際の幅は 200px。
min-width / max-width が必要になる典型パターン
- ボタンが文字数によって潰れるのを防ぐ
- カードが画面幅いっぱいに広がりすぎるのを防ぐ
- 画像が親より大きくならないようにする
- レスポンシブで「伸び縮みするが限界を決めたい」
- テーブルやフォームが小さすぎて読めなくなるのを防ぐ
ボタンが潰れないようにする例
CSS版
.button {
padding: 12px 20px;
background: #3182ce;
color: white;
min-width: 120px;
text-align: center;
display: inline-block;
}
HTML
<a class="button">OK</a>
<a class="button">キャンセル</a>
min-width を付けることで、
短い文字でもボタンが小さくなりすぎない。
Tailwind版
<a class="inline-block px-5 py-3 bg-blue-600 text-white text-center min-w-[120px]">
OK
</a>
Tailwind では min-w-[120px] のように任意値を使う。
カードの最大幅を制限する例（max-width）
CSS版
.card {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #fff;
}
HTML
<div class="card">内容</div>
画面が広くても 600px 以上に広がらないため、
読みやすいレイアウトになる。
Tailwind版
<div class="max-w-[600px] mx-auto p-5 bg-white">
内容
</div>
Tailwind には max-w-sm / max-w-md / max-w-lg などのプリセットもある。
画像が親より大きくならないようにする例
CSS版
img {
max-width: 100%;
height: auto;
}
HTML
<img src="photo.jpg">
画像が親要素の幅を超えないため、
レスポンシブ画像の基本パターン。
Tailwind版
<img src="photo.jpg" class="max-w-full h-auto">
テーブルが小さく潰れないようにする例（min-width）
CSS版
.table {
min-width: 600px;
}
HTML
<div class="table-wrapper">
<table class="table">…</table>
</div>
Tailwind版
<table class="min-w-[600px]">…</table>
横スクロールと組み合わせるとスマホでも見やすい。
min-width / max-width の深掘りポイント
1. width より min-width が強い
.box {
width: 100px;
min-width: 200px;
}
→ 実際の幅は 200px。
これは「潰れ防止」のために非常に重要。
2. max-width はレスポンシブの基本
画面が広いときだけ max-width が効き、
狭いときは width:100% のように伸び縮みする。
例：ブログ本文
.content {
max-width: 700px;
margin: 0 auto;
}
Tailwind では
<div class="max-w-prose mx-auto">
3. min-width は flex と相性が良い
flex 子要素は縮みすぎることがあるため、
min-width を指定すると安定する。
例：横並びのカード
.card {
min-width: 200px;
}
Tailwind
<div class="min-w-[200px]">
4. max-width は画像・文章の可読性を守る
画面が広いときに文章が横に伸びすぎると読みにくい。
max-width を使うと読みやすさが保たれる。
実践例：レスポンシブカードレイアウト
CSS版
.card {
width: 100%;
max-width: 400px;
min-width: 240px;
padding: 20px;
background: #fff;
border-radius: 10px;
}
HTML
<div class="card">カード内容</div>
画面が狭いときは 240px まで縮む
画面が広いときは 400px まで広がる
→ どの画面でもバランスが良い
Tailwind版
<div class="w-full max-w-[400px] min-w-[240px] p-5 bg-white rounded-xl">
カード内容
</div>
まとめ
min-width / max-width は、
「伸び縮みするレイアウト」を作るための基礎です。
- min-width → 小さくなりすぎるのを防ぐ
- max-width → 大きくなりすぎるのを防ぐ
- width より min-width が優先される
- レスポンシブ設計で必須
- Tailwind では min-w-* / max-w-* を使う
