先生と生徒の会話形式で理解しよう

生徒

「先生、ホームページの文字や画像が大きすぎたり小さすぎたりしてレイアウトが崩れることがあるんですけど、CSSで幅を制限する方法ってありますか？」

先生

「はい、その場合はmax-widthとmin-widthというプロパティを使うと便利です。」

生徒

「その2つってどう違うんですか？」

先生

「max-widthは『これ以上大きくならない』制限で、min-widthは『これ以上小さくならない』制限です。それでは実際に使い方を見ていきましょう。」

1. max-widthとmin-widthとは？

CSSのmax-widthは要素の最大幅を指定するプロパティです。例えば画像が画面いっぱいに広がってしまうときに「最大でも500pxまで」と制限できます。
一方でmin-widthは要素の最小幅を指定するプロパティです。例えば文字が折り返されすぎて読みにくくならないように「最低でも200pxは確保する」といった使い方ができます。
この2つを組み合わせることで、コンテンツが「大きすぎず、小さすぎない」快適なサイズを保つことができます。

2. max-widthの基本的な使い方

まずはmax-widthの例を見てみましょう。下記のコードでは、画像がどれだけ大きくても最大500pxまでに制限されます。


<style>
    img {
        max-width: 500px;
    }
</style>

<img src="https://via.placeholder.com/1000x400" alt="サンプル画像">

ブラウザ表示

3. min-widthの基本的な使い方

次にmin-widthの例です。小さな画面でも最低200pxは幅を確保します。


<style>
    div {
        background-color: lightblue;
        min-width: 200px;
    }
</style>

<div>このボックスは幅が小さくなりすぎないように制限されています。</div>

ブラウザ表示

4. max-widthとmin-widthを組み合わせる

実際には、max-widthとmin-widthを同時に指定することで、要素のサイズを「ちょうどよい範囲」に収めることができます。例えば、記事本文の幅を読みやすい範囲に制限するケースです。


<style>
    p {
        min-width: 200px;
        max-width: 600px;
        background-color: #f0f0f0;
        padding: 10px;
    }
</style>

<p>
    この文章は最小200px、最大600pxの幅に制限されています。
    ブラウザの幅を変えてみると、文字の表示が読みやすく保たれるのがわかります。
</p>

ブラウザ表示

5. 日常生活に例えて理解しよう

max-widthとmin-widthをイメージしやすくするために、洋服のサイズで例えてみましょう。
洋服には「SサイズからLサイズまで」という範囲がありますよね。これがまさにmin-widthとmax-widthです。
小さすぎる（Sより下）と着れないし、大きすぎる（Lより上）とブカブカになります。
ページのレイアウトも同じで、見やすさを保つために幅の最小値と最大値を決めておくのです。