HTML/CSS：ボックスモデル

width・padding・borderが正しい

width, padding, border の3つを指定する。

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
  }
</style>

<div class="box">箱の中身</div>

border は「太さ 種類 色」をまとめて書く。solid は実線、他に dashed（破線）などがある。

解答 == C

padding と border は左右両方に付く。

C

200 + 20×2 + 5×2 = 250px。既定では padding と border が外側に足される——これがCSS最大の混乱要因。

実際の幅が200px

box-sizing: border-box; を追加する。

<style>
  .box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid #333;
  }
</style>

<div class="box">箱</div>

指定した幅が「見た目の幅」になる。padding や border は内側に収まるので、レイアウトの計算が格段に楽になる。

<style>
  .box {
    ____: 30px;
  }
</style>

<div class="box">箱</div>

margin が30px

「外側の余白」を意味する6文字のプロパティ。

margin

margin は他の要素との距離。内側の余白（中身と枠の距離）は padding で、名前も役割も違う。

解答 == B

2つの値なら「縦」と「横」。

B

2つなら「上下 / 左右」。4つなら「上 右 下 左」の時計回り、1つならすべて同じ値になる。

4方向のpaddingが正しい

padding: 10px 20px 30px 40px; と時計回りに書く。

<style>
  .box {
    padding: 10px 20px 30px 40px;
  }
</style>

<div class="box">箱</div>

上から時計回り（上→右→下→左）。時計の針の動きを思い浮かべると覚えやすい。

<style>
  .container {
    width: 300px;
    margin: 0 ____;
  }
</style>

<div class="container">中央</div>

左右のmarginがauto

「自動」を意味する4文字のキーワード。

auto

左右を auto にすると余白が均等に分配される。ただし幅を指定していないと効かない点に注意。

解答 == B

上下のmarginは相殺（マージンの重なり）が起きる。

B

大きいほうだけが適用される——これを「マージンの相殺」と呼ぶ。合計されると思い込むと、間隔の計算が合わなくなる。

border-radiusが8px

border-radius で角を丸められる。

<style>
  .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
  }
</style>

<div class="card">カードの中身</div>

角丸は柔らかい印象を与える。4〜8pxが一般的で、大きくしすぎると子どもっぽくなる。

全要素にborder-boxが適用

* { … } で全要素を指定できる。

<style>
  * {
    box-sizing: border-box;
  }

  .box {
    width: 200px;
    padding: 20px;
  }
</style>

<div class="box">箱</div>

実務ではこれを最初に書くのが定番。すべての要素で幅の計算が直感的になり、レイアウト崩れが激減する。

実際の幅が300px、各指定が正しい

margin-bottom で下だけに余白を付ける。

<style>
  .card {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 16px;
  }
</style>

<div class="card">1枚目のカード</div>
<div class="card">2枚目のカード</div>

border-box のおかげで実際の幅も300px。もし指定していなければ 300+40+2＝342px になり、横並びにしたときレイアウトが崩れる。

marginが0 autoで中央配置

margin: 0 auto; を使う。幅の指定が必須。

<style>
  .container {
    width: 800px;
    margin: 0 auto;
  }
</style>

<div class="container">
  <p>中央に配置されたコンテンツ</p>
</div>

これがWebサイトの標準的な中央配置。画面が広くても、コンテンツは中央の一定幅に収まる。

paddingとborderが正しい

border: none; で枠線を消す。

<style>
  .btn {
    padding: 12px 24px;
    background-color: #0066cc;
    color: #ffffff;
    border: none;
    border-radius: 4px;
  }
</style>

<button class="btn">送信する</button>

ボタンは左右の padding を大きめに取る。文字の周りに余裕があるほど押しやすく、押せることも伝わりやすい。

aが250px、bが200px

2つの div を作り、片方だけに box-sizing を指定する。

<style>
  .a {
    width: 200px;
    padding: 20px;
    border: 5px solid red;
  }

  .b {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid blue;
  }
</style>

<div class="a">未指定（250px）</div>
<div class="b">border-box（200px）</div>

同じ width なのに50pxも違う。この差が横並びレイアウトで「なぜか収まらない」原因になる。

paddingとmargin autoが正しい

外側で余白を作り、内側で幅を制限して中央寄せする。

<style>
  .section {
    padding: 60px 20px;
  }

  .inner {
    box-sizing: border-box;
    width: 960px;
    margin: 0 auto;
  }
</style>

<section class="section">
  <div class="inner">
    <h2>セクションタイトル</h2>
    <p>内容が入ります。</p>
  </div>
</section>

外側で余白、内側で幅制限——これがWebサイトの基本構造。左右20pxの padding があるので、スマホでも文字が画面端にくっつかない。

すべての余白と幅が正しい

box-sizing: border-box を全要素に指定すれば、padding や border を足しても幅が変わらない。h3 の margin を 0 0 12px 0 にするのは、既定の上マージンを消して間隔を制御するため。

<style>
  * {
    box-sizing: border-box;
  }

  body {
    background-color: #f5f5f5;
    margin: 0;
    padding: 40px 20px;
  }

  .container {
    width: 600px;
    margin: 0 auto;
  }

  .card {
    background-color: #ffffff;
    padding: 24px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 16px;
  }

  .card h3 {
    margin: 0 0 12px 0;
  }

  .card p {
    margin: 0;
  }

  .btn {
    padding: 12px 24px;
    background-color: #0066cc;
    color: #ffffff;
    border: none;
    border-radius: 4px;
  }
</style>

<div class="container">
  <div class="card">
    <h3>ノートPC</h3>
    <p>軽量で持ち運びに便利なモデルです。</p>
  </div>

  <div class="card">
    <h3>ワイヤレスマウス</h3>
    <p>静音設計で作業に集中できます。</p>
  </div>

  <button class="btn">もっと見る</button>
</div>

このカードの実際の幅は、指定どおり600pxになっている。padding 24px と border 1px が加わっているにもかかわらず——box-sizing: border-box のおかげだ。もしこれが無ければ 600+48+2＝650px になり、container からはみ出していた。

.card h3 { margin: 0 0 12px 0; } にも重要な意図がある。ブラウザは h3 に最初から上下のマージンを付けているので、そのままだとカードの padding と重なって余白が過剰になる。いったん0にリセットし、必要な分だけ自分で指定する——これが余白を正確に制御するコツだ。

body { margin: 0; } も同じ理由による。ブラウザは body に既定で8pxの余白を付けているため、これを消さないとページの端に微妙な隙間が残る。

余白の設計は、地味だが最も効果が大きい。色やフォントを凝らなくても、余白が整っているだけでページは「きちんとして見える」。逆に余白がバラバラだと、どれだけ配色に凝っても素人っぽさが残る。

次章では display を学ぶ。要素が縦に積まれるか横に並ぶか——その挙動を決める仕組みを理解する。