CSSのmax-width・min-widthを徹底解説！初心者でもわかるコンテンツ幅の制限方法

コンテンツの最大幅・最小幅を制限する方法（max-width・min-width）

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

生徒

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

先生

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

生徒

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

先生

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

1. max-widthとmin-widthとは？：Webサイトの「伸び縮み」をコントロールする基本

CSSのmax-width（マックス・ウィズ）とmin-width（ミン・ウィズ）は、要素の横幅に「制限」をかけるためのプロパティです。通常のwidthで幅を固定してしまうと、画面の大きなパソコンでは小さすぎたり、スマホでは画面からはみ出したりしてしまいます。

そこで、「最大でもこれ以上は大きくならない（max-width）」「最小でもこれだけは幅を確保する（min-width）」というルールを決めておくことで、どんなデバイスで見てもレイアウトが崩れない、レスポンシブデザインを実現できるようになります。プログラミング未経験の方でも、まずは「要素が動ける範囲（ガードレール）を決めるもの」とイメージすればOKです。

ここがポイント！

max-width: 「大きすぎ」を防ぐ。画像が画面を突き抜けるのを防ぐときなどに使います。
min-width: 「小さすぎ」を防ぐ。文字が重なったり、ボタンが細長くなりすぎるのを防ぎます。

初心者向けサンプル：幅の変化を体験してみよう

以下のサンプルでは、ボックスに対して「最小300px、最大800px」という制限をかけています。ブラウザの幅を左右に動かしてみると、ある一定のサイズで止まるのがわかります。


<style>
    .resizable-box {
        /* 最小の幅を300pxに固定 */
        min-width: 300px;
        /* 最大の幅を800pxに制限 */
        max-width: 800px;
        /* 幅を100%にすることで、制限の範囲内で伸び縮みさせる */
        width: 100%;
        background-color: #e3f2fd;
        border: 2px solid #2196f3;
        padding: 20px;
        margin: 10px auto;
        text-align: center;
    }
</style>

<div class="resizable-box">
    <p>このボックスは<strong>300pxから800px</strong>の間でサイズが変わります。</p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像">
    <p>画面を広げても800px以上にはならず、縮めても300px以下にはなりません。</p>
</div>

ブラウザ表示

このように、max-widthとmin-widthを使いこなすことで、ユーザーがどんな環境でサイトを見ても、読みやすさを損なわない「親切な設計」が可能になります。

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より上）とブカブカになります。
ページのレイアウトも同じで、見やすさを保つために幅の最小値と最大値を決めておくのです。