max-width/最大幅

max-widthプロパティは最大幅を指定出来ます。

説明

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

max-width説明(最大幅を越えた場合)

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

max-width説明(それ以上の幅が取れない場合)

構文

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

max-width: 最大幅;

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

【max-widthでの最大幅の指定】
最大幅 説明
px ピクセル指定
em 文字の大きさに対する割合
% 親ボックスの幅に対する割合
none 設定なし(デフォルト)

max-width利用例

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

div {
max-width: 100px;
}

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

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

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

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

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

div {
max-width: 5em;
}

<div>12345</div>

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

12345

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

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

div {
max-width: 80%;
}

<div>max-width例</div>

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

max-width例

 点線の枠で示した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取ります。

外枠を越えて150pxまで行くと折り返します。

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

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

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

widthとの併用

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

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

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

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

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

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

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

少ない文字数

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

留意点

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

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

12345678901234

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

1234567890 1234

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

this is a pen.

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

関連ページ

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)