サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
最大・最小サイズ
- ボックスのサイズ
- 横幅の最大値は、max-widthプロパティを指定します。
- 横幅の最小値は 、min-widthプロパティを指定します。
- 高さの最大値は、max-heightプロパティを指定します。
- 高さの最小値は、min-heightプロパティを指定します。
[メモ]
IE6でmin-width・max-widthなどを対応させるようにするには、こちらをご覧ください。- [使い方(width)]
- box1{
width: 100%;
max-width: 400px;
min-width: 220px;
background-color: #ccff99;
}
- [使い方(height)]
- box2{
height: 100%;
max-height: 500px;
min-height: 220px;
background-color: #ccff99;
}
width (横幅) | ||
---|---|---|
プロパティ名 | 値 | 説明 |
max-width: | ; | 最大の幅を指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」または「%」を指定します。 |
min-width: | ; | 最小の幅を指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」または「%」を指定します。 |
none; | 制限なし
sample(max-width : none;) |
height(高さ) | ||
---|---|---|
プロパティ | 値 | 説明 |
max-height: | ; | 最大の高さを指定します。 「100px」のように「数値+単位」を指定します。 単位はpx」または「%」を指定します。 |
min-height: | ; | 最小の高さを指定します。 「100px」のように「数値+単位」を指定します。 単位はpx」または「%」を指定します。 |
none; | 制限なし・・・sample(max-height: none;) |
サンプル
[headの中]
<style type="text/css"><!--
.sample1{
max-width: 400px;
min-width: 200px;
height: 100px;
background-color: #ccff99;
}
.sample2{
width: 300px;
max-height: 500px;
min-height: 200px;
background-color: #ffff8e;
}
[bodyの中]
<div class="sample1">max-width: 400px;・ min-width: 200px; </div><div class="sample2">max-height: 500px;・ min-height: 200px; </div>
[ブラウザ上]
max-width: 400px;・
min-width: 200px;
max-height: 500px;・
min-height: 200px;