1. Home
  2. スタイルシート CSS
  3. ボックス
  4. ボックスの最大幅と最小幅を指定する

ボックスの最大幅と最小幅を指定する


max-width: ***; min-width: ***;

ブラウザ
IE7
Fx
Sf
Cr
O
特性
max-width
min-width

max-width は最大幅を、min-width は最小幅を指定するプロパティです。

このプロパティを使用することで、ボックスの幅を特定の範囲内に収めることができます。



div {
max-width: 500px;
min-width: 300px;
}


プロパティ名 説明
max-width 数値+単位(px 等)またはパーセント 最大の幅を指定 (初期値は none
min-width 数値+単位(px 等)またはパーセント 最小の幅を指定

max-width の初期値は none(制限なし)です。

メモ

IEでは、表示モードが「標準モード」の場合のみ機能するようです。(IE 6以下では未対応)

以下の使用例では、最大幅を 600px、最小幅を 500px に指定しています。この場合、通常の幅は600pxですが、ブラウザの幅を600pxより狭くすると、それに合わせてボックスの幅も狭くなります。更にブラウザの幅を狭くしていくと、500pxより狭くなった時点で横スクロールが入ります。


使用例


<!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">

div {
max-width: 600px;
min-width: 500px;
background-color: #85b9e9;
}

</style>

</head>
<body>

<div>最小幅 500px 〜 最大幅 600px</div>

</body>
</html>

表示例


ボックス

ページの先頭へ


inserted by FC2 system