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の基本的な使い方と役割

CSSのmax-width（マックス・ワイド）は、要素の「最大幅」を決めるためのプロパティです。プログラミング未経験の方でも、まずは「これ以上大きくならないでね」という上限を決めるルールだと考えると分かりやすいでしょう。

例えば、元々1000pxある大きな画像をWebサイトに載せるとします。そのままでは画面からはみ出してしまいますが、max-width: 300px;と指定すれば、どんなに大きな画像でも自動的に300pxに縮小して表示してくれます。

以下のサンプルコードで、実際の動きを確認してみましょう。


<style>
    .limit-box {
        /* 最大幅を150pxに制限します */
        max-width: 150px;
        background-color: #f0f0f0;
        border: 2px solid #333;
        padding: 10px;
    }
    .sample-img {
        /* 画像の最大幅を親要素に合わせる設定です */
        max-width: 100%;
        height: auto;
    }
</style>

<div class="limit-box">
    <p class="small">最大150pxの箱</p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="sample-img">
</div>

ブラウザ表示

このように、max-widthを使うことでコンテンツが想定外に広がりすぎるのを防ぎ、レイアウトが崩れるのを防ぐことができます。これは、PCやスマホなど画面サイズの異なるデバイスでサイトを綺麗に見せる「レスポンシブデザイン」において、非常に重要な第一歩となります。

3. min-width（最小幅）の基本的な使い方

CSSのmin-widthは、要素の「最小の横幅」を指定するプロパティです。ブラウザの画面を小さくしたときに、中身の文字や画像が潰れすぎて見づらくなるのを防ぐ役割があります。

例えば、スマートフォンのような小さな画面で見た際でも、「このボックスだけは200pxより小さくしたくない」という場合に非常に役立ちます。初心者の方は、まず「これ以上小さくなってほしくない限界値」を決めると覚えると分かりやすいでしょう。


<style>
    .min-width-box {
        background-color: #e3f2fd; /* 薄い青色 */
        border: 2px solid #2196f3; /* 濃い青の枠線 */
        padding: 20px;
        min-width: 200px; /* 最小幅を200pxに固定 */
        width: 100%;      /* 通常は画面いっぱいに広がる */
    }
</style>

<div class="min-width-box">
    このボックスは、画面をどれだけ狭くしても「横幅200px」より小さくなることはありません。
    中身の文章が極端に縦長に潰れるのを防ぐことができます。
</div>

ブラウザ表示

※上の例では、親要素（画面）が200pxより大きければ100%の幅で広がりますが、画面を200px以下まで縮めると、ボックスは200pxのサイズを維持し、はみ出す形になります。これが「最小値を守る」というmin-widthの仕組みです。

4. max-widthとmin-widthを組み合わせる（レスポンシブ対応のコツ）

Webデザインにおいて、要素のサイズを固定せずに「可変」にすることは非常に重要です。しかし、ただ可変にするだけでは、大きな画面で見ると広がりすぎたり、スマホで見ると小さくなりすぎたりしてしまいます。

そこで役立つのが、max-width（最大幅）とmin-width（最小幅）の併用です。この2つを組み合わせることで、「画面が広いときはここまで、狭いときでもこれ以下にはならない」という安心できる表示範囲を指定できます。

例えば、ブログの本文を表示する際、一行が長すぎると読者はどこを読んでいるか見失いやすくなります。逆に短すぎると、何度も改行されて読みづらくなります。プログラミング初心者の方は、まず以下の「読みやすい幅を維持する」サンプルから試してみましょう。


<style>
    .responsive-box {
        /* 最小幅を280pxに設定し、スマホでも崩れないようにする */
        min-width: 280px;
        /* 最大幅を700pxに制限し、PCで見ても横に広がりすぎないようにする */
        max-width: 700px;
        /* 幅を親要素に対して80%に設定（可変） */
        width: 80%;
        /* 中央寄せにする設定 */
        margin: 20px auto;
        background-color: #f8f9fa;
        border: 2px solid #007bff;
        padding: 20px;
        line-height: 1.6;
    }
</style>

<div class="responsive-box">
    <p>
        <strong>【表示テスト】</strong><br>
        このボックスは、ブラウザの幅を広げても700px以上にはなりません。
        逆に、幅を狭くしても280pxより小さくなることはありません。
        このように範囲を決めておくことで、どんなデバイスから見ても「読みやすいレイアウト」を維持できるのです。
    </p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-fluid mt-2">
</div>

ブラウザ表示

この設定のポイントは、width: 80%;のようなパーセント指定（相対値）と一緒に使うことです。基本は画面に合わせてふわっと伸び縮みさせつつ、max-widthとmin-widthという「防波堤」を立てておくイメージです。これだけで、Webサイトの使い勝手（UX）は劇的に向上します。

5. 日常生活に例えて理解しよう！max-widthとmin-widthのイメージ

「幅の制限」と言われても、最初はピンときませんよね。そこで、もっと身近な「洋服のサイズ」をイメージしてみましょう。

例えば、あなたが伸縮性のあるフリーサイズのTシャツを買うとします。

min-width（最小幅）： Sサイズより小さくはならない設定です。これ以上縮むと、頭が入らなくて着ることができません。
max-width（最大幅）： Lサイズより大きくはならない設定です。これ以上広がると、ブカブカすぎて服としての形を保てません。

Webサイトもこれと同じです。スマホのような小さな画面では「これ以上小さくなると文字が読めない（min-width）」という限界を守り、逆に大きなモニターでは「これ以上横に広がると間抜けに見える（max-width）」という限界を決めることで、どんな端末でも読みやすいデザインを保つことができるのです。

初心者向け：幅が制限される様子を見てみよう

実際に、画面を広げたり縮めたりしても「使い勝手の良いサイズ」に収まるサンプルを用意しました。青いボックスが「どれだけ伸び縮みするか」に注目してください。


<style>
    .resizable-box {
        background-color: #e3f2fd;
        border: 2px solid #2196f3;
        padding: 20px;
        text-align: center;
        /* ここがポイント！ */
        width: 100%;       /* 基本は画面いっぱいに広がる */
        min-width: 200px;  /* どんなに狭くても200px以下にはならない */
        max-width: 500px;  /* どんなに広くても500px以上にはならない */
        margin: 0 auto;    /* 真ん中に配置 */
    }
</style>

<div class="resizable-box">
    <p class="fw-bold">私は「200pxから500px」の間で動きます！</p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-fluid mb-2">
    <p class="small">ブラウザの幅を変えてみてください。<br>500pxで止まり、200px以下にはなりません。</p>
</div>

ブラウザ表示