先生と生徒の会話形式で理解しよう

生徒

「CSSのボックスモデルってよく聞くんですけど、正直よくわからないんです…。」

先生

「ボックスモデルは、ウェブページのレイアウトを理解するための基本的な考え方です。HTMLの要素は全部『箱（ボックス）』として扱われるんですよ。」

生徒

「全部の要素が箱なんですか？それってどういうことですか？」

先生

「そうなんです。文字や画像、ボタンなど、すべてが見えない箱に入っていて、その箱の周りには余白や枠があるんです。これが『margin』『border』『padding』『content』という4つの領域で構成されているんですよ。」

1. ボックスモデルとは？

CSSのボックスモデルとは、すべてのHTML要素を「箱」として考え、その箱を構成する4つの部分でデザインを調整する仕組みです。ウェブページを作るとき、この仕組みを理解していないと、思った位置に要素が置けなかったり、デザインが崩れたりしてしまいます。

4つの部分は次の通りです。

content（コンテンツ）：文字や画像など、実際に表示される中身
padding（パディング）：コンテンツと枠線の間の内側の余白
border（ボーダー）：箱の境界線
margin（マージン）：他の要素との間の外側の余白

例えば、机の上に箱を置いたときに、「箱の中身」がcontent、「箱の内側の隙間」がpadding、「箱の外枠」がborder、「他の箱との距離」がmarginだと考えるとイメージしやすいです。

2. ボックスモデルの基本構造を見てみよう

実際のHTMLとCSSを使って、ボックスモデルをイメージしやすくしましょう。


<style>
    .box {
        width: 200px;
        padding: 20px;
        border: 5px solid blue;
        margin: 15px;
        background-color: lightyellow;
    }
</style>

<div class="box">ボックスモデルのサンプル</div>

ブラウザ表示

この例では、箱の中身が「ボックスモデルのサンプル」という文字です。内側に20ピクセルのpadding、外側に15ピクセルのmargin、青いborderが設定されています。

3. margin（マージン）とは？

marginは、箱と箱の間の「外側の余白」です。例えば、ボタン同士を少し離したいときにmarginを使います。


<style>
    .margin-sample {
        background-color: pink;
        margin: 30px;
    }
</style>

<div class="margin-sample">外側に30pxの余白があります</div>

ブラウザ表示

この例では、ピンクのボックスの周りに30ピクセル分の空間が空き、他の要素との距離を確保できます。

4. padding（パディング）とは？

paddingは、コンテンツ（中身）と枠線（border）の間の「内側の余白」です。文字が枠にくっつきすぎないようにしたいときに便利です。


<style>
    .padding-sample {
        background-color: lightgreen;
        padding: 20px;
        border: 2px solid black;
    }
</style>

<div class="padding-sample">内側に20pxの余白があります</div>

ブラウザ表示

文字と枠線の間に余白があることで、見やすいデザインになります。

5. border（ボーダー）とは？

borderは、箱の「境界線」です。線の太さ、色、スタイルを自由に変えられます。


<style>
    .border-sample {
        background-color: white;
        padding: 10px;
        border: 5px dashed red;
    }
</style>

<div class="border-sample">赤い点線のボーダー</div>

ブラウザ表示

この例では、赤い点線のボーダーを付けています。デザインのアクセントとしても使えます。

6. content（コンテンツ）とは？

contentは、実際に表示される中身そのものです。文字や画像、リンクなどがここに含まれます。CSSで幅や高さを指定すると、コンテンツの表示サイズを変えることができます。


<style>
    .content-sample {
        width: 150px;
        height: 50px;
        background-color: lightblue;
    }
</style>

<div class="content-sample">コンテンツ部分</div>

ブラウザ表示

幅と高さを指定することで、表示領域の大きさを自由に調整できます。