min-width/最小幅

説明

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

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

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

構文

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

min-width: 最小幅;

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

min-width利用例

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

div {
min-width: 100px;
}

<div>min-width例</div>

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

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

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

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

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

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

div {
min-width: 5em;
}

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

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

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

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

div {
min-width: 120%;
}

<div>min-width例</div>

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

　点線の枠の幅の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に指定していますが、その中でmin-widthを150pxに指定しています。

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

留意点

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

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

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

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

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

関連ページ

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

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

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

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