Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

min-width

要素の最小となる横幅を指定できます。

サンプルコード

style.css

/* px指定: 最低500pxの幅を確保 */
p.test { min-width: 500px;}

/* 0: 最小幅なし（初期値） */
p.test2 { min-width: 0;}

/* ボタンに最低幅を設定してテキストが短くても形を保つ */
button { min-width: 120px; padding: 0 16px;}

/* フレックスアイテムが縮みすぎるのを防ぐ */
.item { flex: 1; min-width: 200px;}

/* テーブルのセル幅を最低限確保 */
th { min-width: 80px;}

指定可能な値一覧

値	概要
数値	数値で指定します。主に使用される単位は『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>