max-width/最大幅

説明

　max-widthは最大幅を指定し、最大幅を越えた場合は文字や画像を折り返して表示します。

　最大幅に達しなくてもそれ以上の幅が取れない場合も折り返して表示します。

構文

　widthプロパティの構文は以下の通りです。

max-width: 最大幅;

　最大幅の指定は以下が出来ます。

max-width利用例

　max-widthの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
max-width: 100px;
}

<div>max-width例です。100pxまで行くと折り返します。</div>

　上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。

　最大値まで幅が取れる場合は、最大値まで幅を広げます。

　em指定の例は以下の通りです。

div {
max-width: 5em;
}

<div>１２３４５</div>

　上記を表示すると以下になります。

　5文字分の幅が取られています。

　%指定の例は以下の通りです。

div {
max-width: 80%;
}

<div>max-width例</div>

　上記を表示すると以下になります。

　点線の枠で示した80%を幅として取ります。

　noneを指定すると他で指定したmax-widthを打ち消せます。

div {
max-width: 80%;
}

.t1 {
max-width: none;
}

<div class="t1">max-width例</div>

widthとの違い

　指定した幅を取るため、widthと非常に似ていますが、max-widthは最大値なのでそれ以下の幅にもなり得ます。

　以下は点線の枠を100pxに指定し、その中でwidthを150pxに指定していますが、枠を超えて150px取ります。

　以下は点線の枠は同じく100pxに指定していますが、その中でmax-widthを150pxに指定しています。

　このように、最大値なので150px取れない場合はそれ以下の幅で折り返します。

widthとの併用

　一定の幅を持たせたいが、親ボックスの幅を越えたくない場合はwidthと併用すると便利です。

div {
width: 150px;
max-width: 100%;
}

<div外枠を越えず100pxまで行くと折り返します。</div>

　上記を以下の点線の中で使っていますが、点線の枠の幅はwidthで100pxに指定しています。

　上記は点線の枠を超えないように折り返しています。

　文字数が少なくて幅が200pxあった場合は以下のようにwidthで指定した150pxを確保します。

　つまり、150pxを確保しようとしつつ、親ボックスの幅は越えないため、親ボックスの幅が可変でも対応出来ます。

留意点

　<span>タグ等のインラインボックスは必要な幅しか取らないため、指定しても無視されます。

　又、半角英数字は途中で折り返さないため、例えば5emを指定しても最初から数字が続いていると以下のように折り返しません。

　スペース等が入ると折り返されます。

　通常は単語の区切り等でスペースが入るため、幅一杯になる前に折り返されます。

　又、日本語も続けて記述しても折り返します。

関連ページ

・ホームページ作成「ボックスのまとめ」

　widthだけでなく、marginやpadding、背景、枠線、回り込み等、ボックス全体の説明をしています。

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る