07. ボックスモデルと余白設計

この章では、CSSのボックスモデルと余白の考え方を学びます。

Webページの要素は、基本的に四角い箱として扱われます。

この箱の仕組みを理解すると、余白が広すぎる、幅がはみ出る、横並びが崩れるといった問題を直しやすくなります。

ボックスモデルとは

CSSでは、要素を次の4つの領域で考えます。

• content
• padding
• border
• margin

それぞれの意味は次の通りです。

カードUIを例にすると、本文や画像がcontent、カード内側の余白がpadding、枠線がborder、カード同士の間隔がmarginです。

paddingとmarginの違い

paddingは内側の余白、marginは外側の余白です。

.card {
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #ddd;
}

この場合、paddingはカードの中身と枠線の間にできます。

margin-bottomは、カードの下にある別の要素との間隔になります。

見た目が似ていても、意味が違います。

内側に余白を作りたいのか、外側に間隔を作りたいのかを考えて使い分けます。

widthとmax-width

横幅を指定する時は、widthとmax-widthを使います。

widthは横幅を指定します。

max-widthは最大幅を指定します。

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

この書き方では、コンテンツの最大幅を960pxにし、画面が広い時は中央に配置します。

画面が狭い時は、最大幅より小さくなります。

スマホ対応を考える時は、固定幅だけでなくmax-widthを使うと扱いやすくなります。

box-sizing

CSSでは、widthにpaddingやborderを含めるかどうかを指定できます。

よく使うのがbox-sizing: border-box;です。

*,
*::before,
*::after {
    box-sizing: border-box;
}

border-boxにすると、widthにpaddingとborderを含めて計算します。

たとえば、width: 300px; padding: 20px;でも、要素全体の幅は300pxとして扱われます。

レイアウト計算がしやすくなるため、実務では最初に指定することが多いです。

marginの相殺

縦方向のmarginは、隣り合う要素同士で相殺されることがあります。

これをmarginの相殺と呼びます。

たとえば、上の要素にmargin-bottom: 40px;、下の要素にmargin-top: 30px;がある場合、単純に70pxになるとは限りません。

大きい方の40pxだけが効くことがあります。

最初は難しく感じるかもしれませんが、実務では次のように考えると扱いやすいです。

• セクション間の余白はセクション側で管理する
• 部品の中の余白はpaddingやgapで管理する
• 上下両方にmarginを付けすぎない

余白のルールを決めると、ページ全体が整いやすくなります。

gapを使う

FlexboxやGridでは、要素同士の間隔にgapを使えます。

.card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

gapを使うと、子要素に個別でmarginを付けなくても間隔を作れます。

横並びやカード一覧では、marginよりgapの方が管理しやすいことが多いです。

余白のルールを作る

余白は、ページの読みやすさに大きく影響します。

ただし、その場その場で適当に余白を付けると、全体に統一感がなくなります。

最初は、次のように段階を決めると扱いやすいです。

必ずこの数値にする必要はありません。

大切なのは、近い意味の余白を同じような数値にそろえることです。

はみ出しの原因

要素が横にはみ出す時は、いくつか原因があります。

• 固定幅が画面より大きい
• 画像にmax-width: 100%;がない
• 長い英単語やURLが折り返されない
• paddingを含めた幅が親要素を超えている
• Flexboxの子要素が縮まない

まずは、どの要素がはみ出しているのかを開発者ツールで確認します。

そのうえで、固定幅を見直したり、画像に最大幅を指定したりします。

img {
    max-width: 100%;
    height: auto;
}

よくある失敗

• 余白を作るためにbrを使う
• すべての要素にその場でmarginを付ける
• 固定幅を指定してスマホではみ出す
• box-sizingを指定せず、幅の計算で混乱する
• 画像が親要素より大きくなって横スクロールする
• セクション内の余白とセクション間の余白が混ざる

余白は、CSSの中でも感覚に頼りやすい部分です。

ルールを持って調整すると、見た目が安定します。

この章のまとめ

• 要素はcontent、padding、border、marginで考える
• paddingは内側、marginは外側の余白
• max-widthとmargin: 0 auto;は中央寄せでよく使う
• box-sizing: border-box;を使うと幅の計算がしやすい
• 横並びや一覧では、要素間の余白にgapを使うと管理しやすい