◆ はじめに
つぎは、ボックス系のプロパティです。
ボックスは、ほぼ全ての要素にあり、以下のように四角い領域で４つの部分から構成されています。
- ■色の領域は、内容領域です。
- ■色の領域は、パディングです。
- ■色の領域は、ボーダーです。
- ■色の領域は、マージンです。
以上、４つの領域の面積をいろいろ設定できます。
尚、ボーダーに関しては、面積以外に色、形状も設定できます。
とにかく、ボックスに関しては、４つの領域を常に意識しましょう。
[サンプル１] - 上記のソース
----------CSS2 ソース------------------------------------------------
div.boxtest1 {
border-color:#99cc99;
border-style:solid;
border-width:1.0em 1.0em 1.0em 1.0em;
margin-left:4%;
margin-right:4%;
margin-top:4%;
margin-bottom:4%;
padding-left:4%;
padding-right:4%;
padding-top:4%;
padding-bottom:4%;
background-color: #aaaaaa;
color: #004488;
font-size: 1.4em;
}
span.boxtest3{
background-color: #ffaaaa;
}
---------- HTML4.01 ソース -----------------------------------------
<div class="boxtest1">
<span class="boxtest3">「中学でも新しい友達の良い所をどんどん見つけて行きます！」</span>
<div>
- スタイルシートの基本的なとこは、スタイルの適用方法を参照してください。
- スタイルシートのリファレンスは、こちらにありますので参照してください。
- 尚、各種ブラウザのCSS2対応状況ガイド（他所様）は、こちらを参照のこと。
◆ 内容領域プロパティ
widthプロパティ
widthプロパティは、内容領域の幅を設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（auto）があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素、ただし、置き換え要素以外のインライン要素とテーブルの列系要素を除く | auto | no | NN6,IE5.5 |
min-widthプロパティ
min-widthプロパティは、内容領域の最小の幅を設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（none）があります。
ボックスの幅を特定の範囲内に制限することが出来ます。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素、ただし、置き換え要素以外のインライン要素とテーブルの列系要素を除く | ブラウザ次第 | no | NN6 |
max-widthプロパティ
max-widthプロパティは、内容領域の最大の幅を設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（none）があります。
ボックスの幅を特定の範囲内に制限することが出来ます。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素、ただし、置き換え要素以外のインライン要素とテーブルの列系要素を除く | none | no | NN6 |
heightプロパティ
heightプロパティは、内容領域の高さを設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（auto）があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素、ただし、置き換え要素以外のインライン要素とテーブルの行系要素を除く | auto | no | NN6,IE5.5 |
min-heightプロパティ
min-heightプロパティは、内容領域の最小の高さを設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（none）があります。
ボックスの高さを特定の範囲内に制限することが出来ます。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素、ただし、置き換え要素以外のインライン要素とテーブル要素を除く | 0 | no | NN6 |
max-heightプロパティ
max-heightプロパティは、内容領域の最大の高さを設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（none）があります。
ボックスの高さを特定の範囲内に制限することが出来ます。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素、ただし、置き換え要素以外のインライン要素とテーブル要素を除く | none | no | NN6 |
[サンプル２] - サンプル１の内容領域のwidthとheightを変えた例。
----------CSS2 ソース------------------------------------------------
span.boxtest4{
background-color: #ffaaaa;
width: 50%;
height: 50px;
}
---------- HTML4.01 ソース -----------------------------------------
<span class="boxtest4">「中学でも新しい友達の良い所をどんどん見つけて行きます！」</span>
◆ マージンプロパティ
margin-topプロパティ
margin-topプロパティは、マージンの上を設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（auto）があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 0 | no | NN6,IE5.5 |
margin-bottomプロパティ
margin-bottomプロパティは、マージンの下を設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（auto）があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 0 | no | NN6,IE5.5 |
margin-leftプロパティ
margin-leftプロパティは、マージンの左を設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（auto）があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 0 | no | NN6,IE5.5 |
margin-rightプロパティ
margin-rightプロパティは、マージンの右を設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（auto）があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 0 | no | NN6,IE5.5 |
marginプロパティ
marginプロパティは、マージンを一括設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（auto）があります。
値は、スペースで区切って指定します。指定数によって以下のようになります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 未定義 | no | NN6,IE5.5 |
- 値が１つの場合 - 上下左右が同じ値が適応される。
- 値が２つの場合 - 値１が上下、値２が左右に適応される。
- 値が３つの場合 - 値１が上、値２が左右、値３が下に適応される。
- 値が４つの場合 - 値１が上、値２が右、値３が下、値４左がに適応される。（時計の回る方向）
[サンプル３] - サンプル１のマージンを変えた例。
----------CSS2 ソース------------------------------------------------
div.boxtest5 {
border-color:#99cc99;
border-style:solid;
border-width:1.0em 1.0em 1.0em 1.0em;
margin-left:8%;
margin-right:8%;
margin-top:8%;
margin-bottom:8%;
padding-left:4%;
padding-right:4%;
padding-top:4%;
padding-bottom:4%;
background-color: #aaaaaa;
color: #004488;
font-size: 1.4em;
}
---------- HTML4.01 ソース -----------------------------------------
<div class="boxtest5">
<span class="boxtest3">「中学でも新しい友達の良い所をどんどん見つけて行きます！」</span>
<div>
◆ パディングプロパティ
padding-topプロパティ
padding-topプロパティは、パディングの上を設定するプロパティです。
設定値は、実数値＋単位、%値があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 0 | no | NN6,IE5.5 |
padding-bottomプロパティ
padding-bottomプロパティは、パディングの下を設定するプロパティです。
設定値は、実数値＋単位、%値があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 0 | no | NN6,IE5.5 |
padding-leftプロパティ
padding-leftプロパティは、パディングの左を設定するプロパティです。
設定値は、実数値＋単位、%値があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 0 | no | NN6,IE5.5 |
padding-rightプロパティ
padding-rightプロパティは、パディングの右を設定するプロパティです。
設定値は、実数値＋単位、%値があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 0 | no | NN6,IE5.5 |
paddingプロパティ
paddingプロパティは、パディングを一括設定するプロパティです。
設定値は、実数値＋単位、%値があります。
値は、スペースで区切って指定します。指定数によって以下のようになります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 未定義 | no | NN6,IE5.5 |
- 値が１つの場合 - 上下左右が同じ値が適応される。
- 値が２つの場合 - 値１が上下、値２が左右に適応される。
- 値が３つの場合 - 値１が上、値２が左右、値３が下に適応される。
- 値が４つの場合 - 値１が上、値２が右、値３が下、値４左がに適応される。（時計の回る方向）
[サンプル４] - サンプル１のパディングを変えた例。
----------CSS2 ソース------------------------------------------------
div.boxtest6 {
border-color:#99cc99;
border-style:solid;
border-width:1.0em 1.0em 1.0em 1.0em;
margin-left:4%;
margin-right:4%;
margin-top:4%;
margin-bottom:4%;
padding-left:8%;
padding-right:8%;
padding-top:8%;
padding-bottom:8%;
background-color: #aaaaaa;
color: #004488;
font-size: 1.4em;
}
---------- HTML4.01 ソース -----------------------------------------
<div class="boxtest6">
<span class="boxtest3">「中学でも新しい友達の良い所をどんどん見つけて行きます！」</span>
<div>
◆ ボーダープロパティ
border-colorプロパティ
border-colorプロパティは、ボーダーの色を設定するプロパティです。
設定値は、色、transparentがあります。また、top,bottom,bottom,rightで修飾すれば、各々ソレができます。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | colorプロパティの値 | no | NN6,IE5.5 |
border-widthプロパティ
border-widthプロパティは、ボーダーの太さを設定するプロパティです。
設定値は、実数値＋単位、キーワード（thin,medium,thick）があります。また、top,bottom,bottom,rightで修飾すれば、各々ソレができます。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | medium | no | NN6,IE5.5 |
border-styleプロパティ
border-styleプロパティは、ボーダーの形式を設定するプロパティです。
設定値は、none,hidden,solid,double,groove,ridge,inset,outset,dashed,dottedがあります。また、top,bottom,bottom,rightで修飾すれば、各々ソレがでます。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | none | no | NN6,IE5.5 |
- none
ボーダーを表示しません。表などのセルのボーダーと重なったときは、セルのボーダーが優先。 - hidden
ボーダーを表示しません。表などのセルのボーダーと重なったときは、こちらが優先。 - solid
solid - double
double - groove
groove - ridge
ridge - inset
inset - outset
outset - dashed
dashed - dotted
dotted
border-top,border-bottom,border-left,border-rightプロパティ
border-top,border-bottom,border-left,border-right各プロパティは、それぞれのボーダーの色、太さ、形式を設定するプロパティです。
設定値は、それぞれを参照にしてください。
色、太さ、形式の３つの値を任意の順にスペースで区切って指定します。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | それぞれのプロパティ参照 | no | NN6,IE5.5 |
borderプロパティ
borderプロパティは、上下左右ボーダーの色、太さ、形式を一括設定するプロパティです。
設定値は、それぞれを参照にしてください。
色、太さ、形式の３つの値を任意の順にスペースで区切って指定します。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | それぞれのプロパティ参照 | no | NN6,IE5.5 |
[サンプル５] - サンプル１のボーダーを変えた例。
----------CSS2 ソース------------------------------------------------
div.boxtest7 {
border-top-color: white;
border-bottom-color: green;
border-top-style: solid;
border-bottom-style: dashed;
border-left-color: red;
border-right-color: black;
border-left-style: double;
border-right-style: groove;
border-width:1.0em 1.0em 1.0em 1.0em;
margin-left:4%;
margin-right:4%;
margin-top:4%;
margin-bottom:4%;
padding-left:4%;
padding-right:4%;
padding-top:4%;
padding-bottom:4%;
background-color: #aaaaaa;
color: #004488;
font-size: 1.4em;
}
---------- HTML4.01 ソース -----------------------------------------
<div class="boxtest7">
<span class="boxtest3">「中学でも新しい友達の良い所をどんどん見つけて行きます！」</span>
<div>