崩れる理由が分かるCSS — ボックスモデルと詳細度（第2回）

「なぜか効かないCSS」と「なぜか幅が合わない」。CSSで詰まる場所は、ほぼこの2つに集約されます。

原因は文法ではありません。要素同士の影響関係です。今回はそこだけを扱います。

そもそもCSSとは#

HTMLで書いた要素に、見た目を指定する言語です。

HTMLが「ここは見出し」と宣言するのに対し、CSSは「見出しは32pxの太字で青色」と決めます。同じHTMLでも、CSSを差し替えるだけで全く別のデザインになります。

セレクタ { プロパティ: 値; }
h1      { color: navy; }

書き方はこの1パターンだけ。覚えることが多いように見えるのは、プロパティの種類が多いからで、文法そのものは10秒で理解できます。難しいのは文法ではなく、要素同士の影響関係です。今回扱うのはそこです。

よくある書き方（Before）#

.card { width: 300px; padding: 20px; border: 1px solid #ccc; }

3枚並べると横に収まらない。width: 300px と指定したのに、実際の幅は342pxだからです。

直した書き方（After）#

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

.card { width: 300px; padding: 20px; border: 1px solid #ccc; }

border-box にすると、paddingとborderを含めて300pxになります。これはほぼ全ての現場で最初に書く1行です。

なぜそうなるか#

ボックスモデル#

要素は内側から content → padding → border → margin の4層です。初期値の content-box では width が最内側のcontentだけを指すため、余白と枠線が外側に足されます。

詳細度#

CSSが効かないときは、後から書いたものが勝つとは限りません。強さの順は次の通りです。

インラインstyle  >  #id  >  .class / :hover / [属性]  >  要素名

!important で殴ると一時的に直りますが、次に上書きしたい人がさらに !important を書くことになります。詳細度は上げず、揃えるのが原則です。

並べる2つの道具#

/* 横一列。中央寄せや折り返しが得意 */
.list { display: flex; gap: 16px; flex-wrap: wrap; }

/* 格子。列数を決めたいときはこちら */
.list { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }

使い分けは「1方向に並べるならFlex、行と列の両方を揃えたいならGrid」。迷ったらどちらで書いても動きます。

手を動かす課題#

第1回で作った一覧に、カード型のCSSを当ててください。同じ見た目をFlexboxとGridの両方で組むのが課題です。書き終えたら、どちらが少ない記述で済んだかメモしてください。

次回はCSS応用です。画面幅が変わっても崩れない書き方に進みます。

今回の学び#

まず、幅の指定は、どこまでを幅と呼ぶかの取り決めに依存しているということ。300pxと書いたのに342pxになるのは不具合ではなく、初期値がそう決まっているからでした。

次に、強さで殴ると、次の人はもっと強く殴ること。一度その手を使うと、以降その場所を触る全員が同じ手を使うことになります。上げるのではなく揃えるのが原則です。

そして、効かないときは推測せずに打ち消し線を見ること。ブラウザの開発者ツールは、どの指定がどれに負けたかを線で表示してくれます。読むだけで答えが出ます。