CSSのボックスモデル（border, margin, padding）を完全ガイド！初心者でもわかる基本

新人と先輩の会話形式で理解しよう

新人

「CSSのボックスモデルって、よく聞くけど、borderやmargin、paddingはそれぞれどう使うんですか？」

先輩

「ボックスモデルは、要素を整えるために非常に大切な部分です。border、margin、paddingそれぞれの役割を理解すると、より自由にレイアウトを組むことができます。」

新人

「なるほど！まずはborderから教えてください。」

先輩

「では、borderから順に説明していきますね。」

1. border（ボーダー）

borderは、要素を囲む枠線です。これを使うことで、要素の周りに視覚的な区切りを作り、強調したり見やすくしたりします。

次の例では、div要素にボーダーを追加する方法を紹介します。


<style>
    .example {
        border: 2px solid black;
    }
</style>

<div class="example">ここに内容が入ります。</div>

ブラウザ表示

上記の例では、div要素の周りに2pxの黒いボーダーが表示されます。これにより、要素が強調され、見やすくなります。

2. margin（マージン）

marginは、要素の外側のスペースを調整します。他の要素との間隔を広げたい場合に使います。

以下のコードでは、前述のボーダーを維持しながら、div要素の外側にマージンを追加する方法を示します。


<style>
    .example {
        border: 2px solid black;
        margin: 20px;
    }
</style>

<div class="example">ここに内容が入ります。</div>

ブラウザ表示

この例では、div要素に20pxのマージンが追加され、周囲の他の要素との間にスペースが生まれます。これにより、要素の外側に余裕ができ、レイアウトが整います。

3. padding（パディング）

paddingは、要素の内側のスペースを調整します。要素内のコンテンツ（テキストや画像など）とボーダーの間に空間を作ります。

以下のコードでは、前述のボーダーとマージンを維持しつつ、内側のスペースにパディングを追加しています。


<style>
    .example {
        border: 2px solid black;
        margin: 20px;
        padding: 15px;
    }
</style>

<div class="example">ここに内容が入ります。</div>

ブラウザ表示

このコードでは、div要素に20pxのマージン、15pxのパディング、2pxのボーダーが設定されています。これにより、要素の内外に適切な空間が確保され、バランスの取れたデザインになります。

4. border, margin, paddingの使い分け

border、margin、paddingは、それぞれ異なる目的で使用します。

border：要素を囲む枠線。視覚的に強調したい場合に使う。
margin：他の要素との間隔を広げたい場合に使う。
padding：要素内のコンテンツとボーダーとの間にスペースを作りたい場合に使う。

これらを適切に使い分けることで、要素のレイアウトやデザインを細かく調整することができます。

5. box-sizing（ボックスサイズの考え方）

ボックスモデルを理解するうえで重要なのが、box-sizingプロパティです。これは、要素の幅や高さの計算方法を変更するために使用します。

通常、widthやheightはコンテンツ部分のサイズを指し、paddingやborderはその外側に追加されます。しかし、box-sizingを使うことで、これらを含めたサイズ指定が可能になります。


<style>
    .example {
        box-sizing: border-box;
        width: 200px;
        padding: 20px;
        border: 2px solid black;
    }
</style>

<div class="example">ここに内容が入ります。</div>

ブラウザ表示

この設定により、paddingやborderを含めて200pxに収まるため、レイアウト崩れを防ぎやすくなります。

6. marginの相殺（マージンの折りたたみ）

marginには「相殺（そうさい）」と呼ばれる特性があります。これは、上下に隣接する要素のmarginが重なった場合、大きい方の値だけが適用される仕組みです。

以下の例では、2つの要素にそれぞれmarginを設定しています。


<style>
    .box1 {
        margin-bottom: 30px;
        border: 2px solid black;
    }
    .box2 {
        margin-top: 20px;
        border: 2px solid black;
    }
</style>

<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>

ブラウザ表示

この場合、間隔は30pxとなり、20pxと30pxが足されるわけではありません。この挙動を理解しておくことで、意図したレイアウトを実現しやすくなります。

7. marginとpaddingのショートハンド

marginやpaddingは、ショートハンド記法を使うことで簡潔に記述できます。これにより、コードの可読性が向上し、効率的にスタイルを設定できます。

例えば、上下左右それぞれに値を指定する場合は、次のように書きます。


<style>
    .example {
        margin: 10px 20px 30px 40px;
        padding: 15px 25px;
        border: 2px solid black;
    }
</style>

<div class="example">ここに内容が入ります。</div>

ブラウザ表示

この記述では、marginは「上・右・下・左」の順に適用され、paddingは「上下・左右」に適用されます。ショートハンドを活用することで、効率よくスタイルを管理できます。