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プロパティ

対応ブラウザ ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 ブロック要素と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;を指定した画像。値より画像が小さい場合、ほとんどのブラウザは縦横比維持で拡大されます


min-width: 300px;

min-width: 50%;

min-width: none;

widthとの違い

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

demo
min-widthのデモ


(C)2012 ホームページ作成無料