Home/Menu

スタイルなCSSの基礎講座

ボックス

◆ はじめに

つぎは、ボックス系のプロパティです。
ボックスは、ほぼ全ての要素にあり、以下のように四角い領域で4つの部分から構成されています。

「中学でも新しい友達の良い所をどんどん見つけて行きます!」

以上、4つの領域の面積をいろいろ設定できます。
尚、ボーダーに関しては、面積以外に色、形状も設定できます。
とにかく、ボックスに関しては、4つの領域を常に意識しましょう。

[サンプル1] - 上記のソース
----------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>

◆ 内容領域プロパティ

widthプロパティ

widthプロパティは、内容領域の幅を設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(auto)があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素、ただし、置き換え要素以外のインライン要素とテーブルの列系要素を除くautonoNN6,IE5.5

min-widthプロパティ

min-widthプロパティは、内容領域の最小の幅を設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(none)があります。
ボックスの幅を特定の範囲内に制限することが出来ます。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素、ただし、置き換え要素以外のインライン要素とテーブルの列系要素を除くブラウザ次第noNN6

max-widthプロパティ

max-widthプロパティは、内容領域の最大の幅を設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(none)があります。
ボックスの幅を特定の範囲内に制限することが出来ます。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素、ただし、置き換え要素以外のインライン要素とテーブルの列系要素を除くnonenoNN6

heightプロパティ

heightプロパティは、内容領域の高さを設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(auto)があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素、ただし、置き換え要素以外のインライン要素とテーブルの行系要素を除くautonoNN6,IE5.5

min-heightプロパティ

min-heightプロパティは、内容領域の最小の高さを設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(none)があります。
ボックスの高さを特定の範囲内に制限することが出来ます。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素、ただし、置き換え要素以外のインライン要素とテーブル要素を除く0noNN6

max-heightプロパティ

max-heightプロパティは、内容領域の最大の高さを設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(none)があります。
ボックスの高さを特定の範囲内に制限することが出来ます。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素、ただし、置き換え要素以外のインライン要素とテーブル要素を除くnonenoNN6
[サンプル2] - サンプル1の内容領域の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のみテスト)
全要素0noNN6,IE5.5

margin-bottomプロパティ

margin-bottomプロパティは、マージンの下を設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(auto)があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素0noNN6,IE5.5

margin-leftプロパティ

margin-leftプロパティは、マージンの左を設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(auto)があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素0noNN6,IE5.5

margin-rightプロパティ

margin-rightプロパティは、マージンの右を設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(auto)があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素0noNN6,IE5.5

marginプロパティ

marginプロパティは、マージンを一括設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(auto)があります。
値は、スペースで区切って指定します。指定数によって以下のようになります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素未定義noNN6,IE5.5
[サンプル3] - サンプル1のマージンを変えた例。
「中学でも新しい友達の良い所をどんどん見つけて行きます!」
----------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のみテスト)
全要素0noNN6,IE5.5

padding-bottomプロパティ

padding-bottomプロパティは、パディングの下を設定するプロパティです。
設定値は、実数値+単位、%値があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素0noNN6,IE5.5

padding-leftプロパティ

padding-leftプロパティは、パディングの左を設定するプロパティです。
設定値は、実数値+単位、%値があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素0noNN6,IE5.5

padding-rightプロパティ

padding-rightプロパティは、パディングの右を設定するプロパティです。
設定値は、実数値+単位、%値があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素0noNN6,IE5.5

paddingプロパティ

paddingプロパティは、パディングを一括設定するプロパティです。
設定値は、実数値+単位、%値があります。
値は、スペースで区切って指定します。指定数によって以下のようになります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素未定義noNN6,IE5.5
[サンプル4] - サンプル1のパディングを変えた例。
「中学でも新しい友達の良い所をどんどん見つけて行きます!」
----------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プロパティの値noNN6,IE5.5

border-widthプロパティ

border-widthプロパティは、ボーダーの太さを設定するプロパティです。
設定値は、実数値+単位、キーワード(thin,medium,thick)があります。また、top,bottom,bottom,rightで修飾すれば、各々ソレができます。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素mediumnoNN6,IE5.5

border-styleプロパティ

border-styleプロパティは、ボーダーの形式を設定するプロパティです。
設定値は、none,hidden,solid,double,groove,ridge,inset,outset,dashed,dottedがあります。また、top,bottom,bottom,rightで修飾すれば、各々ソレがでます。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素nonenoNN6,IE5.5

border-top,border-bottom,border-left,border-rightプロパティ

border-top,border-bottom,border-left,border-right各プロパティは、それぞれのボーダーの色、太さ、形式を設定するプロパティです。
設定値は、それぞれを参照にしてください。
色、太さ、形式の3つの値を任意の順にスペースで区切って指定します。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素それぞれのプロパティ参照noNN6,IE5.5

borderプロパティ

borderプロパティは、上下左右ボーダーの色、太さ、形式を一括設定するプロパティです。
設定値は、それぞれを参照にしてください。
色、太さ、形式の3つの値を任意の順にスペースで区切って指定します。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素それぞれのプロパティ参照noNN6,IE5.5
[サンプル5] - サンプル1のボーダーを変えた例。
「中学でも新しい友達の良い所をどんどん見つけて行きます!」
----------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>

Home/Menu/スタイルシート概説リファレンス