min-widthプロパティ

TOPページに戻る > CSS

min-widthプロパティ

HTML要素の横幅の最小値を指定できます(paddingを含まない横幅)
ブラウザの幅を小さくしても指定した幅より狭くなりません
min-widthの値のみ指定しても最初に表示される最大幅は表示できる幅まで広がります
値はpx、emなどの単位、親ブロック要素の割合を%で指定、none（最小値の設定なし）
paddingの幅はmin-widthの幅には含まれません。paddingを指定している場合、min-widthの幅+paddingが要素の最小値の横幅になります
min-widthといっしょにmax-widthを使うことができます。その場合、mix-widthが100px、max-widthが200pxに指定すると100px～200pxの範囲に幅を限定できます
※IE6が対応していません IE7から対応しています

使い方（書式）

セレクタ { min-width: 値; }

min-widthプロパティ

対応ブラウザ
適用できる要素	ブロック要素とtd　th　input　textarea　select　img
子要素へのスタイルの継承	しない

プロパティの値	説明
単位	px、emなどの単位
%	パーセントで指定。親ブロック要素の割合を%で指定
none	最小値の制限なし、初期値

実際の指定方法

.hogeimg {
 min-width: 300px;             /* 横幅に300pxの最小値を設定 */
 }

.hoge { min-width: 300px; }    /* 最小値が300pxの横幅に指定 */

.hoge2 { min-width: 50%; }     /* 最小値が親ブロック要素の50%の横幅 */

.hoge3 { min-width: none; }    /* 初期値 */

html部分

<img class="hogeimg" src="a200.gif" alt="">

<div class="hoge">min-width: 300px;</div>
<br>
<div class="hoge2">min-width: 50%;</div>
<br>
<div class="hoge3">min-width: none;</div>

実際の表示

原寸大の画像です

下がmin-width: 300px;を指定した画像。値より画像が小さい場合、ほとんどのブラウザは縦横比維持で拡大されます

widthとの違い

widthプロパティは指定した幅で固定されるのに対して、min-widthは、最初はブラウザの幅いっぱいまで表示されますが、ブラウザの幅を小さくしてもmin-widthで指定された値より小さくなりません

demo
min-widthのデモ