CSSのボックスモデルと優先順位：余白・幅・継承を理解する
padding・border・margin、border-box、最大幅、継承・詳細度・記述順を学習。開発者ツールでCSSが効かない原因を切り分けます。
第5回では、文字が端へ寄っているページに余白を作り、読みやすい幅へ整えます。同時に、CSSを書いた順番だけでは結果が決まらないことを学びます。見た目が予想と違うときに、値を増やして試す前に原因を確認できるようになることが目標です。
ボックスモデルで余白を考える
content・padding・border・margin
要素の領域を内側から見ると、内容、内側の余白padding、境界線border、外側の余白marginで構成されます。カード内の文字と枠の距離はpadding、隣のカードとの距離はmarginやレイアウトのgapで扱います。背景色は通常paddingまで塗られ、marginには塗られません。
標準のcontent-boxでは、width: 300pxに左右20pxのpaddingと左右1pxのborderを加えると、ボーダーまでの幅は342pxになります。box-sizing: border-boxなら、指定した300pxにpaddingとborderが含まれます。marginはどちらの場合も指定幅の外側です。
読みやすい最大幅を決める
.containerに最大1120pxの幅を設定し、狭い画面では左右20pxずつ空けます。margin-inline: autoは横方向の余白を自動配分して中央に置く指定です。padding-blockは縦書きも含む論理方向の指定ですが、この日本語横書きページでは上下のpaddingとして働きます。
固定のwidth: 1120pxだけにすると、小さな画面からはみ出す場合があります。ここではmin()を使い、「1120px」と「画面側の利用可能幅から40pxを引いた値」の小さい方を採用します。
styles.cssに余白を追加する
前回のCSSの末尾へ追加するコード
前回のstyles.cssを残し、次のコードを末尾へ追加してください。完成版ZIPには追加済みのCSSが入っています。
* { box-sizing: border-box; }
.container { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.section { padding-block: 64px; }
.hero { padding-block: 64px; }
.card { padding: 24px; border: 1px solid #c7d2c8; border-radius: 16px; }
.card + .card { margin-top: 16px; }
img { max-width: 100%; height: auto; }
button, input, select { font: inherit; }
input, select { width: 100%; padding: 12px; }
.field { margin-block: 20px; }画像とフォームの幅を確認する
max-width: 100%によって画像が親の幅を超えないようにし、height: autoで縦横比を保ちます。ブラウザーの標準CSSではフォームの文字設定が本文と一致しない場合があるため、font: inheritで揃えています。inheritは親要素の計算済みの値を使う指定です。
CSSの優先順位を調べる
継承とカスケードは別の仕組み
本文の文字色やフォントなど、子要素へ引き継がれるプロパティがあります。一方、paddingやborderは通常そのまま継承されません。カスケードは、同じ要素・同じプロパティに複数の指定があるとき、どの値を採用するかを決める仕組みです。
詳細度と記述順
同じオリジン・重要度・カスケードレイヤーなどの条件で競合する通常のルールでは、ID、クラス、要素などから計算する詳細度を比較します。たとえば.card pはpより具体的です。詳細度も同じ場合は、後に書いたルールが優先されます。「後から書けば必ず勝つ」ではありません。
確認用に次を末尾へ加えると、カード内の段落は前のルールの色になります。確認後は2つとも削除してください。
.card p { color: #175d53; }
p { color: #7b3024; }!importantを増やすと、後の変更が追いにくくなります。まずStylesでどの指定が適用されているか、Computedで最終的な値を確認します。詳細度だけでなく、親からの継承か、その要素への直接指定かも区別してください。
レイアウトの不具合を切り分ける
marginの相殺に注意する
通常のブロック配置では、上下のmarginが相殺される場合があります。隣接する2つの余白が常に足し算になるわけではありません。部品間の間隔を管理したい場合は、次回のFlexbox/Gridとgapを使うと意図を表現しやすくなります。
練習問題
カードのpaddingを24pxから32pxに変えて、文字と枠の距離だけが変わるか確認します。次にブラウザーを390px程度の幅にし、画像が縮小されるか調べてください。はみ出しがある場合は、開発者ツールでその要素のcontent・padding・borderを順に確認します。
参考資料
この回の完成版と学習の続き
第5回の見本をブラウザーで開く · 第5回の完成コードをダウンロード
ZIPを展開してindex.htmlを開けば、この回の完成時点から試せます。コードを変更する場合は、ZIP内のファイルをテキストエディターで編集して保存してください。