幅がずれる謎を解く

width: 300px と決めたのに、実際の箱はなぜか少し大きい——。多くの人がつまずくこの謎の正体は、余白と枠線の足し算です。仕組みを知れば、box-sizing ひとことで解決できます。

なぜ大きくなるの？

CSSはふつう、width を中身だけの幅として扱います。そこに padding（内側の余白）や border（枠線）を足すと、それらは外側に上乗せされます。

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid teal;
}

これだと、実際の幅は「300 + 左右のpadding 40 + 左右のborder 10 ＝ 350px」。指定した300より、ひとまわり大きくなってしまうのです。

box-sizingで揃える

そこで box-sizing: border-box; の出番です。これをつけると、padding と border を幅の中に含めて計算してくれます。

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid teal;
}

こうすれば、余白や枠線をどれだけ足しても、箱の幅は300pxのまま。「指定した数字＝見たままの大きさ」になり、レイアウトがぐっと組みやすくなります。

もう1つの定番おまじない：リストの見た目リセット

*（アスタリスク）は「ぜんぶ」を指す特別なセレクタ。だから * { box-sizing: border-box; } は「すべての部品に、まとめて」という意味になります。

同じように、最初にまとめてリセットしておくと便利なものがもう1つ。<ul>のリストは、初期設定で黒い点と内側の余白がついています。

ul {
  list-style: none;
  padding: 0;
}

list-style: none; で黒い点を消し、padding: 0; で初期設定の余白も消します。カードのようにリストを箱として使いたいときは、この2行で”リストらしさ”をまっさらにしておくのが定番です。

画像とリンクの初期設定もリセット

同じ発想で、<img>と<a>にも定番のリセットがあります。

img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}

max-width: 100%;（幅と高さで習った道具）は、画像が親の箱からはみ出さないための保険。display: block;（displayで習った切りかえ）は、画像の下にできるわずかなすき間を消します。color: inherit;（クラスセレクタで登場した書き方）は、まだ色を決めていないリンクを、青色ではなくまわりの文字と同じ色にしておく保険です。どちらも「まだ何もしていない部品」を、おとなしい初期状態にそろえておくためのリセットです。

このレッスンのまとめ

1. width はふつう中身だけの幅（padding・border は外に足される）
2. box-sizing: border-box; で、それらを含めた幅になる
3. 「幅がずれる・はみ出す」の多くは、これで解決
4. list-style: none; padding: 0; で、リストの黒い点と余白をリセットできる
5. imgにはmax-width: 100%; display: block;、aにはcolor: inherit;が定番の保険

これで、箱の大きさを思いどおりにあやつれるようになりました。 :::