ZeroPlus Media > Web制作 > HTML/CSS > max-widthとmin-widthの違いと使い分けを解説

max-widthとmin-widthの違いと使い分けを解説

HTML/CSS

2022/01/07

2023/04/14

美しいWebサイトを構築するにあたって、要素の幅はとても重要な値となります。

CSSでは要素の幅を設定するプロパティとして下記の3種類があります。

width
max-width
min-width

今回はこれらの使い分け・違いについて解説していきますので、一緒に学習していきましょう！

違いが分かれば適切なプロパティを設定して美しいサイトを構築できるようになるだけでなく、効率よくコーディングができるようになります。

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

width・max-width・min-widthの違いとは
max-widthの使いどころ
- コンテンツ幅
- 画像
min-widthの使いどころ
- コンテンツ幅
まとめ

width・max-width・min-widthの違いとは

おさらいとしてwidthは要素の幅を設定することができるプロパティです。

基本的な書式は以下になります。

セレクタ {
width: 値;
}

max-widthとmin-widthの基本的な書式は以下になります。

セレクタ {
max-width: 値;
}
セレクタ {
min- width: 値;
}

値のところには「数字+px」や「数字+%」などを指定することができます。

ではそれぞれのプロパティについて解説していきます！

基本的なwidthプロパティの使い方

widthを絶対値で指定

下記HTMLのcontentクラスに、width:300px;を指定します。

  <div class="container">
    <div class="content">
      要素の幅は300pxです！
    </div>
  </div>

.container {
  width: 100%;
  padding: 0 20px;
  background-color: lightcoral;
}
.content {
  font-size: 24px;
  width: 300px;
  background-color: blue;
  color: white;
}

出力結果

要素の幅は300pxです！

要素の幅はpx指定なのでブラウザ幅が変わっても300pxのまま維持されます。

widthを相対的な値で指定

widthの値を%指定にすると以下になります。

  <div class="container">
    <div class="content">
      要素の幅は50%です！
    </div>
  </div>

.container {
  width: 100%;
  padding: 0 20px;
  background-color: lightcoral;
}
.content {
  font-size: 24px;
  width: 50%;
  background-color: blue;
  color: white;
}

出力結果

子要素にはwidth:50%;を指定しているので、親要素の横幅に対して50%が維持されます。
もし、親要素がpx指定であればそれに対しての相対幅になります。

つまり親要素が1,000pxの時、子要素に50%を指定すると、1,000pxに対しての50%なので子要素の幅は500pxということになります。
子要素を100%にした場合は、親要素の値と同じ1,000pxで出力されます。

max-widthプロパティは最大幅を指定

max-widthは最大幅を指定することができます。

例えば以下のようなHTMLがあるとします。親要素にwidth:100%;を、子要素にmax-widthを指定します。

  <div class="container">
    <div class="content">
      親要素が100%、子要素のmax-widthは800pxです！
    </div>
  </div>

.container {
  width: 100%;
  background-color: lightcoral;
}
.content {
  font-size: 24px;
  width: 100%;
  max-width: 800px;
  background-color: blue;
  color: white;
}

出力結果

max-widthが800pxなので子要素の幅は800px以上広がりません。

min-widthプロパティは最小幅を指定

max-widthが最大幅なら、min-widthは最小幅の設定となります。下記のような場合は400px以下にはなりません。

  <div class="container">
    <div class="content">
      親要素が100%、子要素のmin-widthは400pxです！
    </div>
  </div>

.container {
  width: 100%;
  background-color: lightcoral;
  padding: 20px;
}
.content {
  font-size: 24px;
  min-width: 400px;
  width: 50%;
  background-color: blue;
  color: white;
}

表示結果

ここまでの内容をまとめると下記表にまとめます。

プロパティ	解説
width	横幅を指定する標準的なプロパティ。
max-width	最大幅を指定。
min-width	最小幅を指定。

用途に応じて適切なプロパティを使用していきましょう。

max-widthの使いどころ

コンテンツ幅

コンテンツ幅をある幅以上広げたくない場合にmax-widthを使用するとよいでしょう。

下記のようにmax-widthを使用しない場合を見てみましょう。

  <div class="container">
    <div class="content">
      コンテンツ
    </div>
  </div>

.container {
  width: 100%;
  background-color: lightcoral;
  padding: 20px;
}


.content {
  font-size: 24px;
  width: 100%;
  background-color: blue;
  color: white;
  margin: auto;
}

出力結果

max-widthを指定しないとどこまでも要素が横に広がっていくので、ある程度の幅でとどめておきたい場合はmax-widthを指定します。

CSSにmax-widthの記述を追加します。

.content {
  font-size: 24px;
  width: 100%;
  max-width: 800px;
  background-color: blue;
  color: white;
  margin: auto;
}

表示結果

画像

画像にもmax-widthを指定して大きさを制御することができます。もしmax-widthを指定しなければ、画像は横幅に応じて大きくなります。

  <div class="container">
    <div class="content">
      <img class="content__img" src="images/sample.png" alt="サンプル画像">
    </div>
  </div>

.container {
  width: 100%;
  background-color: lightcoral;
  padding: 20px;
}

.content {
  width: 100%;
  margin: auto;
}

.content__img {
  width: 100%;
  height: 100%;
  display: block;
}

出力結果

横幅を広げていくにしたがって、画像も大きくなっていきます。ここにmax-widthを指定して画像の大きさを制御します。

.container {
  width: 100%;
  background-color: lightcoral;
  padding: 20px;
}

.content {
  width: 100%;
  margin: auto;
  max-width: 500px;
  height: auto;
}

.content__img {
  width: 100%;
  height: 100%;
  display: block;
}

出力結果