In 'n' Out

ボックスモデルとは何か

CSSで要素の大きさや見え方を考えるとき、土台となる考え方がボックスモデルです。
ボックスモデルとは、要素をひとつの箱として捉え、その箱がどのような構造で画面上に配置されているかを説明するための仕組みです。
これまで扱ってきたbackground-color、border、padding、marginは、すべてこの箱のどこに作用しているかを理解するための要素です。

ボックスモデルは、方眼紙の上に四角を描くイメージで考えると分かりやすくなりますので、方眼紙を使った例えで説明します。

ボックスモデルの中心にあるのがcontentです。
テキストや画像など、実際に表示したい内容はすべてこの領域に入ります。
この段階では、まだ余白や枠線は存在せず、純粋に中身だけが配置されています。

paddingはcontentとborderの間にある空間で、中身を囲むように配置されます。
背景色はpaddingの領域まで塗られるため、見た目の大きさにも影響します。
方眼紙で考えると、文字のまわりに余白のマスを増やした状態です。

borderはpaddingの外側にあり、要素の輪郭を形作ります。
ここまでが、この要素自身の範囲です。
borderがあることで、どこまでがひとつの箱なのかを視覚的に判断できるようになります。

marginはborderの外側にあり、他の要素との距離を調整するための余白です。
marginの領域には背景色は塗られず、要素そのものには含まれません。
方眼紙では、箱の外側に空白を確保している状態として考えることができます。

ボックスモデルにおける各要素の役割

ボックスモデルでは、要素はひとつの箱として扱われ、その箱は内側から外側へ順番に構造を持っています。
contentが中身、paddingが内側の余白、borderが境界線という関係です。
これらはすべて、要素の見た目の大きさに影響します。

ここでは、実際にコードと出力を見ながら、どの部分がどのようにサイズに関わっているのかを確認します。

contentのみを指定した場合

コード例

<div class="sample-box">
    content
</div>

.sample-box{
    width: 200px;
    background-color: #dcf8c0;
}

出力例

この状態では、contentの幅として200pxが指定されています。
余白や枠線は存在しないため、見た目としても200pxの箱として表示されます。

paddingを追加した場合

コード例

<div class="sample-box">
    content
</div>

.sample-box{
    width: 200px;
    padding: 20px;
    background-color: #dcf8c0;
}

出力例

paddingを指定すると、contentの外側に余白が追加されます。
この余白は要素の内側に含まれるため、背景色はpaddingの領域まで塗られます。

その結果、widthは同じ200pxのままでも、見た目のサイズは大きくなります。
これは、widthがcontentの幅のみを指定しているためです。

paddingとborderを追加した場合

コード例

<div class="sample-box">
    content
</div>

.sample-box{
    width: 200px;
    padding: 20px;
    border: 5px solid #000000;
    background-color: #dcf8c0;
}

出力例

さらにborderを追加すると、paddingの外側に枠線が描かれます。
borderも要素の一部であるため、見た目のサイズはさらに大きくなります。

ここでも、widthの値は変わっていません。
それにもかかわらず、表示される箱は段階的に大きくなっています。

上記3つの出力例比較

なぜボックスモデルを理解する必要があるのか

このように、paddingやborderを指定すると、同じwidthでも見た目の大きさは変化します。
これはCSSの仕様であり、widthはcontentの幅を基準に計算されているためです。

しかし、実際のレイアウトでは、要素の幅を揃えたい場面や、指定したサイズ通りに配置したい場面が多くあります。
そのとき、ボックスモデルの構造を理解していないと、なぜサイズが合わないのか分からなくなります。

見た目が大きくなったのか、内側に余白が増えたのか、それとも境界が追加されたのか。
その違いを判断するために、ボックスモデルの考え方が必要になります。

まとめとしてのボックスモデル

ボックスモデルでは、content,padding,borderがそれぞれ異なる役割を持ち、要素の見た目の大きさを形作っています。
widthはこれらすべてをまとめたサイズではなく、contentを基準に指定されます。

この仕組みを理解しておくことで、CSSで要素のサイズを扱う際の挙動が整理しやすくなります。
ただし、この挙動は常に扱いやすいとは限りません。

次に扱うbox-sizingは、このサイズ計算の基準を切り替えるためのプロパティです。

サイズを調整する

box-sizingは、widthやheightがどの範囲を基準に計算されるかを制御するプロパティです。

構文

セレクタ{
    box-sizing:値;
}

値にはcontent-boxとborder-boxとあります。
box-sizingを指定しなかった場合は、デフォルトでcontent-boxが効いています。
一方でborder-boxは指定しないと反映されません。

コード例

<p class="sample-sizing">
    指定がない場合はcontent-boxになります。
</p>
<p class="box-sizing">
    border-boxを指定しました。
</p>

.sample-sizing{
    width: 200px;
    padding: 20px;
    border: 5px solid #000000;
    background-color: #dcf8c0;
}

.sample-box-sizing{
    width: 200px;
    padding: 20px;
    border: 5px solid #000000;
    background-color: #dcf8c0;
    box-sizing: border-box;
}

出力例

指定しない場合は幅200pxに20pxずつpaddingができ、5pxのborderが周囲に追加されました。
このボックスの見た目の幅は、200pxにpadding20pxが左右で40px、border5pxが左右で10px加わり、合計250pxになります。

一方で値にborder-boxを指定した場合は幅200pxにpaddingとborderの数値が含まれます。
border-boxの値を使うと設計した通りの幅を使用できるため、直感的なレイアウトが可能になります。