HTML5 & CSS3 リファレンス - min-width プロパティ（幅の最小値）

CSS3: min-width プロパティ - 幅の最小値

■ 概要

項　　目	説　　明
記述形式	セレクタ {min-width: 値 }
値の形式	数値　（長さ，%） \| inherit
初期値	0
対応ブラウザー	C2+ / e7+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素	すべての要素　（非置換のインライン要素，テーブルのコラム，コラム・グループを除く）
継　　承	しない

■ 解説

min-widthプロパティ は，幅の最小値 を指定します。

指定できる値の形式は，以下のとおりです。

値	説　　明
数値　（長さ）	幅の最小値を長さの単位を付けて指定します。
数値　（%）	コンテンツのブロックの幅を基準にした百分率（%）で幅の最小値を指定します。
inherit	親要素の指定を継承します。

■ 使用例（ min-width プロパティの利用）

HTMLソース
CSS <head> ～ </head>	div.sample { display: inline-block; margin: 10px; padding: 0.1em; border: 0.1em solid #8c8c8c; min-width: 12.4em; }
HTML <body> ～ </body>	<div class="sample">テキスト　テキスト</div> <br> <div class="sample">テキスト　テキスト　テキスト　テキスト</div> <br> <div class="sample">テキスト　テキスト　テキスト　テキスト　テキスト　テキスト</div>

HTMLソース

CSS
<head> ～ </head>

div.sample {
   display: inline-block;
   margin: 10px;
   padding: 0.1em;
   border: 0.1em solid #8c8c8c;
   min-width: 12.4em;
}

HTML
<body> ～ </body>

<div class="sample">テキスト　テキスト</div>
<br>
<div class="sample">テキスト　テキスト　テキスト　テキスト</div>
<br>
<div class="sample">テキスト　テキスト　テキスト　テキスト　テキスト　テキスト</div>

ブラウザー表示例
テキスト　テキスト ↑ width = min-width = 12.4em の表示テキスト　テキスト　テキスト　テキスト ↑ width =（文字列の幅＋ 0.4）em の表示テキスト　テキスト　テキスト　テキスト　テキスト　テキスト ↑ width =（文字列の幅＋ 0.4）em の表示

上の例では，sampleクラス の <div> 要素では， padding と border の設定値から，width プロパティの値は，通常，(文字列の幅＋ 0.4) [em] となります。　しかし，このクラスでは，min-width プロパティ の値が 12.4em となっていますので，width プロパティの値は， 12.4em を下限としてそれより小さくはなりません。

■ 備考

【参考ページ】

「とほほの WWW 入門」の「スタイルシート入門」の「min-width プロパティ」のページ
「HTMLクイックリファレンス」の「min-width プロパティ」のページ
「ねこだまのCSSリファレンス&デモ」の「min-width プロパティ」のページ
「W3C」の「min-width プロパティ」のページ