max-width は最大幅、min-width は最小幅を指定するプロパティです。
input、textarea、select要素にこのスタイルを設定すると、フォームの入力欄やボタン、セレクトボックスなどの最大幅と最小幅を指定することができます。
#example {
max-width: 500px;
min-width: 400px;
}
| max-width | 最大幅を指定します |
|---|---|
| min-width | 最小幅を指定します |
それぞれ 数値+単位（px、他）か %（割合）で指定します。
※max-width のデフォルトは none（制限なし）です。（例：max-width: none）
以下の使用例では、最大幅を 500px、最小幅を 400px に指定しています。この場合、通常の幅は500pxですが、ブラウザの幅を500pxより狭くすると、それに合わせて表の幅も狭くなります。更にブラウザの幅を狭くしていくと、400pxより狭くなった時点で横スクロールが入ります。
これらのプロパティでサイズを指定した場合でも、textareaにはcols属性とrows属性を指定しておかなければなりません。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
.example {
width: 100%;
max-width: 500px;
min-width: 400px;
}
textarea {
height: 10em;
}
-->
</style>
</head>
<body>
<form method="POST" action="example.cgi">
<p><input type="text" name="demo1" class="example"></p>
<p><select name="demo2" class="example">
<option value="デザイン1">Webサイトデザイン1</option>
<option value="デザイン2">Webサイトデザイン2</option>
<option value="デザイン3">Webサイトデザイン3</option>
</select></p>
<p><textarea name="demo3" cols="50" rows="10" class="example"></textarea></p>
</form>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
