【max-width】内容領域の最大の幅を指定

max-widthプロパティでは、内容領域の最大の幅(幅の最大値)を指定することができます。 最大値を設定しておくと、そのボックスの幅を特定の範囲内に収める事が可能です。

max-widthプロパティはブロックレベル要素以外にも、置換要素(<IMG><TEXTAREA><INPUT><SELECT><OBJECT>)などにも指定することができます。

指定方法は、実数にpxなどの単位を付ける方法、親ボックスの幅に対する割合で指定する方法があります。 幅に対して制限をしないようにするには、値にnoneを指定します。

またmax-widthプロパティには、負の値は指定できません。

書式

  • max-width : ……… 内容領域の幅の最大値を指定

★:実数値+単位、パーセント値+%、none、inherit

実数値+単位
数値にpxなどの単位を付けて最大の幅を指定します
パーセント値+%
そのボックスを含んでいる親ボックス(包含ブロック)の幅に対する割合で、最大の幅を指定します
none
幅に対して最大値の制限をしません。この値が初期値となります。

使用した時の例

.sample1 {max-width: 100px;}
.sample2 {max-width: 50%;}

div {border:solid 1px #ccc;}
<div class="sample1">ボックスの最大の幅を100pxに制限しています。</div>
<div class="sample2">ボックスの最大の幅を50%に制限しています。</div>

ブラウザ上の表示例

ボックスの最大の幅を100pxに制限しています。
ボックスの最大の幅を50%に制限しています。

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 全ての要素(非置換インライン要素,tr,thead,tbody,tfootを除く)
メディア visual
対応ブラウザ Internet Explorer7~ , Google Chrome4~ , Firefox1~ , Opera10.1~ , Safari3.1~

関連情報