【CSS基礎編】ボックスモデル

みなさん「ボックスモデル」をご存知でしょうか。

ボックスモデルはcssの概念のことで、CSSで理想のスタイルを創り上げる際、このボックスモデルの仕組みや構造を理解しておくほど、より複雑なレイアウトを再現することができます。

今回はその基礎となる考え方をまとめます。

●ボックスの構成

ボックスモデルは、以下の4つから構成されています。

・要素：
テキストや画像など、コンテンツそのものを表示。この領域の大きさはheight（高さ）、width（横幅）プロパティで指定できます。

・padding（パディング）：
borderと要素の間にある余白。要素の内側の余白を取るために使い、paddingプロパティで指定できます。

・border（ボーダー）：
paddingより外側の領域で、枠線・縁取りを行います。borderプロパティで指定できます。

・margin（マージン）：
borderより外側の余白。この領域の大きさはmarginプロパティで指定します。

下の図は視覚的にこの4つを表したもので、これをボックスモデルといいます。

例えば、HTMLで以下のような記述をし、

<div>
    <h1>HELLO, World!!</h1>
    <p>Have a nice day.</p>
</div>

cssでスタイルを指定すると、下の図のように表示されます。
（色は要素ごとに区別しやすくするためにつけています。）

div {
    width: 200px;
    height: 150px;
    padding: 50px;
    border: 2px solid #000;
    margin: 50px;
    text-align: center;
}

ブラウザで表示確認するとき、
検証ツールを使うと、要素のどの部分にどれくらいのスタイル・余白が付いているのか、簡単に確認することができるので、ぜひコーディングと同時進行でチェックしてみてください。

〈検証ツールの開き方　Chrome版〉
右クリック→「検証」もしくは「デベロッパーツール」
Mac：Fnキー + F12キー　もしくは　Command + Option + i
Windows：F12キー　もしくは　Ctrl + Shift + i

以上、簡単にボックスモデルの紹介でした。