サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
最大・最小サイズ
- ボックスのサイズ
- 横幅の最大値は、max-widthプロパティを指定します。
- 横幅の最小値は 、min-widthプロパティを指定します。
- 高さの最大値は、max-heightプロパティを指定します。
- 高さの最小値は、min-heightプロパティを指定します。
[メモ]
ＩＥ６で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;） | |
サンプル
[ｈｅａｄの中]
<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;
}
[ｂｏｄｙの中]
<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;
