max-width プロパティ

プロパティ max-width は要素の最大幅を設定します。プロパティの値には、サイズの単位のいずれか、または値を指定しないことを意味するキーワード none を使用できます。

通常、このプロパティは可変幅の要素（幅がパーセンテージで指定されているか、全く指定されておらず、要素がその内容に応じて幅を広げる）に対して設定されます。要素の幅がパーセンテージで指定されている場合、ブラウザウィンドウを大きくすると、その幅は max-width の値に達するまで増加します。

構文

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

例

この例では、幅は親要素の幅に対するパーセンテージで指定されています。ブラウザウィンドウの幅を広げると、コンテナもブラウザウィンドウの幅に合わせて大きくなります。ただし、max-width（この場合は 900px）で定義された値までしか大きくなりません。コンテナがこの幅に達すると、それ以上は大きくなりません：

html<div id="elem"></div>

css#elem {
  width: 70%;
  max-width: 900px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

この例では、コンテナの幅は両側から制限されています：900px より大きく、また 400px より小さくすることはできません：

html<div id="elem"></div>

css#elem {
  width: 70%;
  max-width: 900px;
  min-width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

関連項目