max-widthプロパティに指定できる値
max-widthプロパティには次の値を設定することができます。
| 値 | 内容 |
|---|---|
| none | 最大幅を指定しない。初期値。 |
| 数値 + 単位 | 任意の単位（px、em）で最大幅を指定。 |
| 数値 + % | 親要素に対する割合で最大幅を指定。 |
使用例1
max-widthプロパティを「300px」、widthプロパティを「auto(初期値)」で指定した場合の例です。
max-widthプロパティの指定が無ければ親要素の幅へ調整されます。
「300px」と指定のある場合、親要素の幅に関わらず300pxが最大幅の上限になります。
CSS コード例
.parent {
width: 400px;
}
.box1 {
width: auto;
max-width: 300px;
}HTML コード例
<div class="parent">
<p class="box1">widthプロパティのテスト</p>
</div>
使用例2
max-widthプロパティを「50%」で指定した場合の例です。
指定のある場合、親要素の幅に関わらず50%（今回の場合は400pxの50%で200px）を最大の幅として調整します。
CSS コード例
.parent {
width: 400px;
}
.box2 {
width: auto;
max-width: 50%;
}HTML コード例
<div class="parent">
<p class="box2">widthプロパティのテスト</p>
</div>