CSSの基本「ボックスモデル」をCSSで書いてみる

CSS（スタイルシート）を学ぶ上で必ず理解しないと行けないものの一つに「ボックスモデル」があります。

巷ではボックスモデルの図が良く出てますが、この記事ではボックスモデル自体をCSS（スタイルシート）で書いてみました。

relativeとabsoluteを使えば簡単に書くことができます。

ボックスモデルをCSSで書く方法

ボックスモデルとはHTMLの要素はすべて四角の箱の中に入っているという考え方で、この箱の中身に対してCSS（スタイルシート）で様々な修飾を行います。

まずは実際にボックスモデルをCSS（スタイルシート）で書いてみます。

基本的には各HTMLの要素にそれぞれの色分けされたように、外側から「margin」「border」「padding」「contents」を持ちます。

ボックスモデルをCSSで書くソース

次に実際にソースを見てみます。
まずはCSS（スタイルシート）から。

.margin-box {
position: relative;
width: 300px;
height: 300px;
background-color:lightgreen;
text-align:center;
}
.border-box {
position: absolute;
right : 30px;
bottom: 30px;
width: 240px;
height: 240px;
background-color:aquamarine;
text-align:center;
}
.padding-box {
position: absolute;
right : 60px;
bottom: 60px;
width: 180px;
height: 180px;
background-color:navajowhite;
text-align:center;
}
.contents-box {
position: absolute;
right : 90px;
bottom: 90px;
width: 120px;
height: 120px;
background-color:lightpink;
}

これは、それぞれの部品の箱を色違いに書いてます。
大外の箱（marginを表す箱）から順に少しずつ小さくして重ねています。

次にHTMLです。

<div class="margin-box">

margin
<div class="border-box">border</div>
<div class="padding-box">padding</div>
<div class="contents-box">contents</div>
</div>

これでソースを書いた部分に無事ボックスモデルが表示されます。

まとめ

CSS（スタイルシート）の基本であるボックスモデルをCSSで書いてみました。

CSS（スタイルシート）を工夫すれば色んなことができますね。

以上、CSSの基本「ボックスモデル」をCSSで書いてみるでした。