max-width: ***; min-width: ***;
| ブラウザ |
|
|---|---|
| プロパティ |
max-width は最大幅を、min-width は最小幅を指定するプロパティです。
このプロパティを使用することで、ボックスの幅を特定の範囲内に収めることができます。
div {
max-width: 500px;
min-width: 300px;
}
max-width の初期値は none（制限なし）です。
以下の使用例では、最大幅を 600px、最小幅を 300px に指定しています。この場合、通常の幅は600pxですが、ブラウザの幅を600pxより狭くすると、それに合わせてボックスの幅も狭くなります。更にブラウザの幅を狭くしていくと、300pxより狭くなった時点で横スクロールが入ります。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div {
max-width: 600px;
min-width: 300px;
background-color: #85b9e9;
}
</style>
</head>
<body>
<div>最小幅 300px ～ 最大幅 600px</div>
</body>
</html>
- 表示例
