min-width/最小幅

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

説明

 min-widthは最小幅を指定し、最大に取れる幅が指定した幅以上の場合は最大に取れる幅で文字や画像を折り返して表示します。

min-width説明(指定幅以上取れる場合)

 最大に取れる幅が最小幅に満たない場合は最低でも最小幅まで確保します。

min-width説明(指定幅以下の幅しかない場合)

 このため、横にはみ出る可能性があります。

構文

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

min-width: 最小幅;

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

【min-widthでの最小幅の指定】
最小幅 説明
px ピクセル指定
em 文字の大きさに対する割合
% 親ボックスの幅に対する割合

min-width利用例

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

div {
min-width: 100px;
}

<div>min-width例</div>

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

mix-width例

 最小幅なので、それを越えて幅が取れる場合は指定値より大きくなります。

 点線の枠で囲った幅を50pxに指定した結果が以下です。

mix-width例

 最小幅なので、点線の枠を超えて100px取られます。

 以下例では全て点線の枠の幅を50pxに指定して表示します。

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

div {
min-width: 5em;
}

<div>12345</div>

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

12345

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

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

div {
min-width: 120%;
}

<div>min-width例</div>

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

min-width例

 点線の枠の幅の120%を幅として取ります。

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

div {
min-width: 120%;
}

.t1 {
min-width: 0;
}

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

widthとの違い

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

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

外枠が200pxあっても150pxまで行くと折り返します。

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

外枠が200pxあると200pxまで幅を取ります。

 このように、最小値なので150px以上取れる場合は指定した以上の幅で折り返します。

留意点

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

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

12345678901234

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

1234567890 1234

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

this is a pen.

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

関連ページ

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

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

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

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

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

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

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

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

Access:カウンター(total)

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