レッスン4：ボックスモデル——余白・枠線・サイズを操る

このレッスンで学ぶこと

ブロック要素とインライン要素の違いを説明できる
ボックスモデル（content・padding・border・margin）を理解する
margin・padding・borderを使い分けられる
box-sizingで実用的なサイズ計算ができる
開発者ツールでボックスを確認できる

レッスン3では、CSSで色やフォントを当てて自己紹介ページを華やかにしました。次は要素の「位置」と「大きさ」を操る番です。HTMLの各要素は四角いボックスとしてブラウザに描画されます。このボックスの仕組みを「ボックスモデル」と呼び、CSSでレイアウトを組むための最重要概念です。

すべての要素は四角いボックス

ブラウザは、HTMLのすべての要素を「四角形のボックス」として扱います。見出しも、段落も、リンクも、画像も、見えないところで四角形の領域を占めています。

このボックスは4つの層からできています。内側から順に、こうなっています。

content（コンテンツ）：文字や画像などの中身が表示される領域
padding（パディング）：内側の余白。コンテンツとborderの間
border（ボーダー）：枠線
margin（マージン）：外側の余白。ほかの要素との間

「内側の余白がpadding、外側の余白がmargin、その境目に引く線がborder」と覚えると整理しやすいです。

4層の入れ子関係を図にすると、こうなります。

flowchart TB
    subgraph margin["margin（外側の余白）"]
        subgraph border["border（枠線）"]
            subgraph padding["padding（内側の余白）"]
                content["content<br/>（中身：文字・画像など）"]
            end
        end
    end

contentがいちばん内側にあり、それをpaddingが包み、その外側にborder、いちばん外側がmarginという関係です。

💡 ポイント 余白を作りたいと思ったとき、内側に余白がほしいのか（コンテンツとボックスの境界の間に空間がほしい）、外側に余白がほしいのか（ほかの要素との間隔を空けたい）で、padding・marginの使い分けが決まります。

ブロック要素とインライン要素

要素には大きく2つの種類があります。

ブロック要素は、横幅いっぱいに広がり、前後で改行されます。<h1>〜<h6>、<p>、<ul>、<li>、<div> などが代表例です。段落や見出しのように、独立した「ブロック」として扱われる要素です。

インライン要素は、文章の中に流し込まれ、必要な分だけの幅しか占めません。前後で改行されません。<a>、<span>、<strong>、<em> などが代表例です。

レッスン2まで使ってきたタグの多くはブロック要素ですが、<a> や <img> はインライン要素（厳密にはinline-block）です。なお、width や height の指定が効きやすいのはブロック要素のほうです。インライン要素の幅・高さの指定は基本的に効きません。

📝 補足 CSSの display プロパティで、要素の表示の種類を変えることもできます。display: block でインライン要素をブロック化したり、逆に display: inline-block で「改行しないけど幅・高さを指定できる」状態にしたりできます。

実習：ボックスを実際に見てみる

ボックスモデルを言葉で覚えるより、目で見たほうが早いです。my-website フォルダの style.css の最後に、次のCSSを追加してください。

.demo-box {
  background-color: #fff;
  margin: 20px;
  padding: 30px;
  border: 3px solid #2c3e50;
  width: 300px;
}

そして index.html の <body> 内、例えば一番下に、次のHTMLを追加してください。

<div class="demo-box">
  <p>これはボックスモデルの確認用の要素です。</p>
</div>

<div> は意味を持たない汎用のブロック要素で、装飾やレイアウトのために要素をまとめるときに使います。

保存して再読み込みすると、白い背景に濃紺の枠線が付いた四角い箱が表示されるはずです。中の文章には30pxの余白（padding）があり、外側には20pxの余白（margin）があります。

ブラウザの開発者ツールを使えば、これらの層を視覚的に確認できます。

ブラウザの開発者ツール

ブラウザには、Webページの構造やCSSを確認できる「開発者ツール」が標準で備わっています。Chrome、Edge、Firefoxなど、主要ブラウザはどれも持っています。

開発者ツールを開く方法は次のとおりです。

キーボード：F12（Windows）または Option + Command + I（Mac）
マウス：要素を右クリックして「検証」（Chrome・Edge）または「要素を調査」（Firefox）

開発者ツールを開いた状態で、先ほど追加した「これはボックスモデルの確認用の要素です。」の文字を右クリックして「検証」を選んでください。下または右側にツールが開き、その要素のHTMLとCSSが表示されます。

CSSパネルの下のほうにスクロールすると、四角形の図が見つかります。これがボックスモデルの可視化で、外から margin（オレンジ）、border（黄色）、padding（緑）、content（青）の順に色分けされて、それぞれのサイズが書かれています。

💡 ポイント 開発者ツールはWeb制作の必須ツールです。「思ったとおりにレイアウトされない」とき、最初にこれを開いて、ボックスのサイズや余白が想定と違っていないか確認するのが鉄則です。CSSの一時的な書き換えもこの中で試せて、保存しなくてもブラウザでの見え方を変えられます。

marginとpaddingの個別指定

margin: 20px; のように1つの値だけ書くと、上下左右すべてに20pxの余白が付きます。個別に指定したい場合は、4つの方向別のプロパティを使うか、まとめ書きの形式を使います。

個別指定：

.demo-box {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 30px;
  margin-left: 10px;
}

まとめ書き（4値）：

.demo-box {
  margin: 20px 10px 30px 10px; /* 上 右 下 左 */
}

まとめ書き（2値）：

.demo-box {
  margin: 20px 10px; /* 上下 左右 */
}

paddingも同じ形式で指定できます。

widthとheightの落とし穴——box-sizing

要素の幅と高さは width と height で指定します。ところがここに注意点があります。

CSSの初期設定では、width: 300px と指定したとき、その300pxは「contentの幅」を指します。padding と border は別途加算されるので、見た目の合計幅は300pxより大きくなります。

例えば次のCSSの場合、見た目の幅は何ピクセルになるでしょうか。

.demo-box {
  width: 300px;
  padding: 30px;
  border: 3px solid #2c3e50;
}

答えは 366px です。content幅300px + 左右padding 60px（30px×2） + 左右border 6px（3px×2） = 366pxとなるからです。レイアウトを組むうえで、この計算は混乱の原因になりがちです。

box-sizing: border-box——直感的なサイズ計算へ

この問題を解決するのが box-sizing: border-box です。これを指定すると、width と height が「border含めた外側の幅・高さ」を指すようになり、padding と border はその内側に収まる形になります。

.demo-box {
  box-sizing: border-box;
  width: 300px;
  padding: 30px;
  border: 3px solid #2c3e50;
}

これで、見た目の幅はちょうど300pxになります。padding と border は300pxの内側に収まるよう、content幅が自動で調整されます。

実務では、すべての要素にこの border-box を適用するのが定番です。style.css の先頭に、次のCSSを追加してください。

* {
  box-sizing: border-box;
}

*（アスタリスク）はすべての要素に対するセレクタです。これでページ全体が border-box で動くようになり、サイズ計算で混乱しにくくなります。

💡 ポイント box-sizing: border-box は、現代のWeb制作では「最初に書くおまじない」として定着しています。難しい理由を理解しなくても、まず書いておけば後の作業が楽になります。

marginの相殺——上下のmarginが合体する現象

ブロック要素同士が縦に並んでいるとき、上の要素の margin-bottom と下の要素の margin-top が重なって、大きいほうだけが反映される現象があります。これを「marginの相殺」と呼びます。

例えば、ある段落の margin-bottom: 20px と、次の段落の margin-top: 30px がある場合、合計の余白は50pxにはならず、30pxだけになります。

最初は混乱するかもしれませんが、これは「余白を二重に取らないようにする」というブラウザの仕様です。気になる場合は、片方のmarginだけで余白を制御するクセをつけると整理しやすくなります。

実習：カード風の要素を作る

ボックスモデルの理解を確かなものにするため、カード風の要素をひとつ作ってみましょう。index.html に、次のHTMLを追加します（先ほどの demo-box の代わりにこちらを使ってもOKです）。

<div class="card">
  <h3>登山が趣味です</h3>
  <p>休日は近隣の山に登りに行きます。最近のお気に入りは高尾山と御岳山です。</p>
</div>

style.css に、カードのスタイルを追加します。

.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  max-width: 400px;
}

.card h3 {
  margin-top: 0;
  color: #2c3e50;
}

保存して再読み込みすると、白背景に薄いグレーの枠線、角が少し丸まったカード風の要素が表示されます。

ここで使った新しいプロパティは2つです。

border-radius：角を丸める。値が大きいほど丸が大きくなる
max-width：最大幅。中身が短くてもこの幅を超えない

.card h3 のセレクタは「.card の中にあるh3要素」という意味で、子要素にスタイルを当てる書き方です。これで、特定のクラスの内側のh3だけにスタイルを当てられます。

📝 補足 セレクタを半角スペースでつなぐと「子孫セレクタ」になります。.card h3 は「.cardの中の、すべての階層の子孫h3」という意味です。直接の子だけに限定したい場合は .card > h3 のように > を使います。最初は半角スペースの形だけ覚えれば十分です。

まとめ

このレッスンでは、以下のことを学びました。

すべてのHTML要素は四角いボックスで、内側から content・padding・border・margin の4層からできている
ブロック要素は横幅いっぱい・前後で改行、インライン要素は文章中に流し込まれる
余白は内側がpadding、外側がmargin
ボックスのサイズ計算は box-sizing: border-box を全要素に当てると直感的になる
開発者ツールを使うとボックスの構造を視覚的に確認できる

次のレッスンでは、Flexboxを使って要素を横並びにしたり、整列したりする方法を学びます。1次元のレイアウトを自在に組めるようになりましょう。

確認クイズ

このレッスンの理解度をチェックしましょう。