Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- min-width
min-width
要素の最小となる横幅を指定できます。
サンプルコード
p.test { min-width: 500px;} p.test1 { min-width: 0;}
指定可能な値一覧
値 | 概要 |
---|---|
数値 | 数値で指定します。主に使用される単位は『px』や『%』です。負の値の指定はできません。『%』で指定した場合の基準となる大きさは包含ブロックの横幅となります。初期値は『0』です。 |
ブラウザでの表示結果
<div style="min-width: 500px; background-color: #ff0;">ここはdiv要素です。『min-width: 500px』と指定しています。</div>
<div style="width: 500px; border: solid 1px #f00;"> <div style="min-width: 80%; width: 300px; background-color: #ff0;">ここはdiv要素の中のdiv要素です。親のdiv要素(赤枠の要素)に『width: 500px』と指定し、この要素(背景色黄色の要素)には『min-width: 80%』、『width: 300px』と指定しています。この要素の最小の横幅は親要素の横幅に対する相対値となるため『400px』となり、『width: 300px』よりも大きな値となるため、この要素の横幅は『400px』となります。</div> </div>
対応ブラウザ
IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
---|---|---|---|---|---|---|---|---|---|
iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
---|---|---|
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。