【CSS】レッスン2-05:ボックスモデルを理解しよう

一つ前の章では4種類のセレクタについて学習しました。

今回はボックスモデルについて見ていきましょう。

Lesson2-1:CSS学習の入り口|文字に色を付けよう
Lesson2-2:CSSを読み込む3つの方法
Lesson2-3:テキストスタイルを変更しよう
Lesson2-4:4種類のセレクタを使いこなそう
Lesson2-5:ボックスモデルを理解しよう ◁今回はココ
Lesson2-6:ボックススタイルを変更しよう
Lesson2-7:継承とカスケードを理解しよう

CSSの「ボックスモデル」は、ウェブページの要素をどのように配置し、サイズを決定するかを理解するための基本的な概念です。

すべてのHTML要素は見えない「ボックス」として扱われ、そのボックスには、コンテンツ(内容)パディング(余白)ボーダー(枠線)マージン(外側の余白)という4つの領域が存在します。

このボックスモデルを適切に理解することで、ウェブページのレイアウトを思い通りに調整し、意図したデザインを正確に実現することができます。

この記事ではCSSボックスモデルの構造と各ボックスの役割について詳しく解説します。

学習を進めることでボックスモデルの仕組みを理解し、スタイル設定をより効果的に行えるようになりましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

ボックスモデルの概要

CSSのボックスモデルは、ウェブページの各要素がどのように配置され、どの部分にスペースが確保されるかを決定するための重要な概念です。

ボックスモデルは以下の4つの領域で構成されています。

  • コンテンツボックス(content box): 実際のコンテンツ(テキストや画像など)が配置される領域
  • パディングボックス(padding box): コンテンツとボーダーの間の余白
  • ボーダーボックス(border box): パディングを囲む枠線
  • マージンボックス(margin box): 他の要素との間隔を確保するための余白

以下の図をご覧ください。各ボックスがどのように配置され、どの部分がどの役割を果たしているのかを視覚的に理解できます。

この図のように、ボックスの階層構造は内側から順に コンテンツ → パディング → ボーダー → マージン という順番で構成されています。

例えば要素の幅や高さを指定すると、デフォルトではコンテンツボックスのサイズに適用され、ボーダーやパディング、マージンは追加で考慮されることになります。

ボックスモデルの構成

ボックスモデルは、コンテンツボックス(content box)、パディングボックス(padding box)、ボーダーボックス(border box)、マージンボックス(margin box) の4つの領域で構成されています。

それぞれの役割と設定方法を詳しく見ていきましょう。

コンテンツボックス(content box)

コンテンツボックスは、テキストや画像などの実際のコンテンツが配置される領域です。

要素の幅(width)や高さ(height)を指定すると、デフォルトではこのコンテンツボックスのサイズを決定します。

<div class="content-box-example">コンテンツボックス</div>
.content-box-example {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}
  • コンテンツが収まりきらない場合、要素の内容ははみ出したり、自動的に折り返されたりします。
  • overflow プロパティを使用して、スクロールや隠す設定が可能です。

補足:<div>タグとは?

<div> タグはHTMLにおいて「ブロック要素」として機能し、ウェブページ内のコンテンツをグループ化するために使用されます。特にCSSを適用してスタイルやレイアウトを設定する際に役立ちます。

例えば複数の要素をひとまとめにして、特定のデザインや配置を施す場合に使用します。

<div class="container">
    <p>これは段落です。</p>
    <p>これは別の段落です。</p>
</div>

このように<div> を活用することでページの構造を整理しやすくなり、スタイリングの適用も容易になります。

パディングボックス(padding box)

パディングボックスは、コンテンツとボーダーの間の余白を指します。

padding プロパティを使用して、四方に余白を設定できます。

padding: 20px; /* 四方向に均等に余白を追加 */
padding: 10px 20px; /* 上下、左右に異なる値を設定 */
padding: 10px 15px 20px 25px; /* 上、右、下、左の順で指定 */
  • パディングは背景色が適用されるエリアに含まれます。
  • 要素のサイズはパディングによって拡張されるため、注意が必要です。

ボーダーボックス(border box)

ボーダーボックスはパディングの外側に配置される枠線です。

border プロパティを使用して、枠のスタイルや色を指定します。

border: 2px solid black;  /* 太さ、スタイル、色を指定 */
border-width: 5px;        /* ボーダーの太さのみを指定 */
border-style: dashed;     /* 点線ボーダー */
border-color: red;        /* ボーダーの色を指定 */
  • ボーダーを設定すると要素の合計サイズが増加します。
  • ボーダーのスタイルには、soliddasheddotted などがあります。

マージンボックス(margin box)

マージンボックスは要素の外側に位置し、他の要素との間隔を調整するための領域です。

margin プロパティを使って余白を設定できます。

margin: 20px; /* 四方向に均等なマージンを追加 */
margin: 0 auto; /* ブロック要素を中央揃え */
margin: 10px 15px 20px 25px; /* 上、右、下、左の順で指定 */
  • マージンは背景色の影響を受けません。
  • 上下のマージンが重なる「マージン相殺」という現象が発生する場合があります。

以下のHTMLコードを使用して、ボックスモデルの各部分(コンテンツ、パディング、ボーダー、マージン)を設定してみましょう。

  • コンテンツの幅を 200px、高さを 100px に設定する。
  • パディングを上下 20px、左右 30px に設定する。
  • ボーダーを 黒色、太さ5px、実線 で設定する。
  • マージンを四方向すべて 50px に設定する。
  • 背景色を好きな色に変更する。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ボックスモデルの練習</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box">ボックスモデルを試そう!</div>
</body>
</html>

ボックスモデルの適用方法

ボックスモデルを適用する際、CSSのさまざまなプロパティを適切に設定することで、要素のサイズやレイアウトを細かく制御できます。

ここではデフォルトの挙動、box-sizing プロパティ、ボックスサイズの計算方法について解説します。

デフォルトのボックスモデルの挙動

デフォルトではwidthheight を指定した場合、これらの値は コンテンツボックス(content box) のサイズに適用されます。

そのためパディングやボーダーを追加すると、実際の要素のサイズは指定値より大きくなる ことに注意が必要です。

例えば「default-box」と命名したクラスセレクタを適用した以下のコードを見てみましょう。

<div class="default-box">デフォルトのボックス</div>
.default-box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  background-color: lightgray;
}

この要素のサイズを計算すると以下のようになります。

200px (コンテンツ) + 20px * 2 (パディング) + 5px * 2 (ボーダー) = 250px

デフォルトでは、パディングやボーダーを考慮した合計サイズを計算する必要があります。

box-sizing プロパティの活用

CSSではbox-sizing プロパティを使用することで、ボックスモデルのサイズ計算の方法を変更できます。

特にborder-box を指定することで要素の合計サイズを固定でき、より直感的にレイアウトを調整できます。

例えば「border-box-example」と命名したクラスセレクタを適用した以下のコードを見てみましょう。 CSSコードの下から3行目に注目して下さい。

<div class="border-box-example">ボーダーボックス</div>
.border-box-example {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
  background-color: lightblue;
}

200px (全体サイズ) = 200px (コンテンツ + パディング + ボーダー)

  • box-sizing: border-box; を使用すると、widthheight が要素の総合的なサイズに適用され、パディングやボーダーが含まれた状態で計算されます。
  • これにより、意図したレイアウトを正確に保ちやすくなります。

ボックスモデルのサイズ計算のポイント

要素のサイズを設定する際は、以下のような式でサイズを計算できます:

  • デフォルト設定(content-box): 合計幅 = width + (padding * 2) + (border * 2)
  • box-sizing: border-box 設定: width = コンテンツ幅 + padding + border

まとめ

  • CSSのボックスモデルでは、デフォルトではコンテンツボックスが基準となる。
  • box-sizing: border-box; を適用すると、パディングやボーダーを含むサイズ計算が可能になる。
  • レイアウトの崩れを防ぐために、border-box を積極的に活用するのがおすすめ。

以下のHTMLとCSSを使用して、異なるボックスモデル設定を持つ要素がどのように表示されるかを試してみましょう。

  • ボックス1とボックス2の表示幅の違いを確認し、どの設定がレイアウトに適しているか考えてみましょう。
  • パディングやボーダーを変更して、どのようにサイズに影響が出るか試してみましょう。
<div class="box box1">ボックス1</div>
<div class="box box2">ボックス2</div>
.box {
    width: 150px;
    height: 100px;
    padding: 20px;
    border: 5px solid #333;
    margin-bottom: 20px;
    text-align: center;
}

.box1 {
    box-sizing: content-box;
    background-color: lightyellow;
}

.box2 {
    box-sizing: border-box;
    background-color: lightpink;
}

マージンの相殺

CSSのボックスモデルにおいてマージン(margin) は要素同士の間隔を設定するための重要なプロパティですが、特定の条件下でマージンが合算(相殺)される「マージン相殺(margin collapse)」という現象が発生します。

この動作を理解し、意図しないレイアウトの崩れを防ぐことが重要です。

マージン相殺とは?

通常、隣接する2つの要素が上下に配置され、それぞれに margin が設定されている場合、大きい方のマージンのみが適用され、合算されない という挙動が起こります。

これを「マージン相殺」と呼びます。

以下のコードで考えてみましょう。

<div class="box-a">A</div>
<div class="box-b">B</div>
.box-a {
  margin-bottom: 20px;
  background-color: lightblue;
  padding: 10px;
}

.box-b {
  margin-top: 30px;
  background-color: lightcoral;
  padding: 10px;
}

通常であれば合計 50px の間隔ができると思われますが、実際には 30px しか確保されません。

これは、2つのマージンのうち大きい方が優先されるためです。

次のHTMLとCSSを使用して、上下のマージンがどのように相殺されるのかを観察してみましょう。

  • 2つの要素の間の距離をブラウザで確認してください。
  • なぜ合計80pxではなく、実際には50pxしか間隔が空かないのか考えてみましょう。
  • マージン相殺を防ぐために、親要素に padding を加えるとどうなるか試してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>マージン相殺の練習</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box margin-top">ボックス1</div>
    <div class="box margin-bottom">ボックス2</div>
</body>
</html>
.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    text-align: center;
    padding: 20px;
    border: 2px solid black;
}

.margin-top {
    margin-bottom: 50px;
}

.margin-bottom {
    margin-top: 30px;
}

サンプルコード

これまでに学んだボックスモデルの概念を実際に試して理解を深めるために、以下のサンプルコードを用意しました。

HTMLとCSSを組み合わせて、ボックスモデルの各要素(コンテンツ、パディング、ボーダー、マージン)の違い を視覚的に確認できます。

それぞれのコードをVSCでブラウザ表示してみてください。

基本的なボックスモデルの例

以下のコードでは、コンテンツ、パディング、ボーダー、マージンをそれぞれ異なる色で視覚化し、どの領域がどのように影響を与えるかを確認できます。

HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ボックスモデルの例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box-model-example">
        ボックスモデルを学習中!
    </div>
</body>
</html>
CSSコード
.box-model-example {
    width: 200px;                /* コンテンツボックスの幅 */
    height: 100px;               /* コンテンツボックスの高さ */
    padding: 20px;               /* パディング(青色) */
    border: 5px solid black;      /* ボーダー(黒色) */
    margin: 30px;                 /* マージン(透明) */
    background-color: lightgreen; /* コンテンツの背景色 */
    box-sizing: content-box;       /* デフォルトのボックスサイズ設定 */
}

box-sizing プロパティの違いを比較

次のコードでは、content-boxborder-box の違いを視覚的に確認できます。

HTMLコード
<div class="content-box-example">content-box</div>
<div class="border-box-example">border-box</div>
CSSコード
.content-box-example, .border-box-example {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin-bottom: 20px;
}

.content-box-example {
    box-sizing: content-box;
    background-color: lightblue;
}

.border-box-example {
    box-sizing: border-box;
    background-color: lightcoral;
}
  • content-box: パディングとボーダーが要素のサイズに追加され、全体のサイズが大きくなる。
  • border-box: 指定した widthheight の中にパディングとボーダーが含まれる。

マージンの相殺の例

マージン相殺の仕組みを示すコードを確認し、どのようにマージンが影響を受けるかを学びましょう。

HTMLコード
<div class="margin-box box1">ボックス1</div>
<div class="margin-box box2">ボックス2</div>
CSSコード
.margin-box {
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
    background-color: #f2f2f2;
}

.box1 {
    margin-bottom: 40px;
}

.box2 {
    margin-top: 20px;
}

本来であれば合計60pxのスペースになるはずですが、マージン相殺により大きい方(40px)のみが適用されます。

まとめ

  • サンプルコードを実際に試して、ボックスモデルの挙動を確認しましょう。
  • box-sizing の設定により、要素のサイズ計算が異なることを理解しましょう。
  • マージン相殺の挙動を確認し、適切なレイアウト調整を行う方法を学びましょう。

まとめ

この記事ではCSSのボックスモデルについて学習し、各構成要素(コンテンツ、パディング、ボーダー、マージン)の役割や、それらが要素のサイズにどのように影響を与えるかを理解しました。

学習したポイント

  1. ボックスモデルの基本構造
    • HTML要素は、コンテンツ・パディング・ボーダー・マージンの4つの層で構成されている。
    • 各層は要素のサイズや配置に影響を与える。
  2. box-sizing プロパティの活用
    • デフォルトでは content-box が適用されるが、border-box を使用することでパディングやボーダーを含めたサイズ指定が可能。
    • border-box を適用することで、レイアウトの調整が容易になる。
  3. マージン相殺の理解
    • 隣接する要素間のマージンが合算されず、大きい方が適用される「マージン相殺」が発生する。
    • paddingborder を活用することで、相殺を防ぐことができる。

お疲れさまでした!

ボックスモデルの基本をしっかり身につけることで、より洗練されたレイアウトを作成する力が身につきます。

次回も頑張りましょう!

練習問題2-5:ボックスモデルを表示しよう

VSCで「Lesson2-5.html」と「lesson2-5.css」のふたつのファイルを作って保存してください。

そのファイルにコードを書き、ブラウザに以下のように表示させましょう。ただし、以下の条件に従うこと。

  1. 外側のボックス(.outer-box を作成し、以下の設定を適用する:
    • 幅: 400px、高さ: 250px
    • パディング: 上下 30px、左右 50px
    • ボーダー: 5px、実線、黒色
    • マージン: 上下 40px、左右 自動(中央揃え)
    • 背景色: lightgray
    • box-sizing: border-box; を適用
  2. 内側のボックス(.inner-box を作成し、以下の設定を適用する:
    • 幅: 300px、高さ: 150px
    • パディング: 20px
    • ボーダー: 3px、点線、青色
    • マージン: 上下 20px、左右 自動(中央揃え)
    • 背景色: lightblue
    • box-sizing: content-box; を適用
  3. マージン相殺の現象を確認する:
    • .inner-box の上下にマージン 20px を設定し、外側のボックスとの間隔を確認する。
    • 親要素(.outer-box)に padding-top: 1px; を追加して、マージン相殺を防いでみる。
  4. ボックスモデルのサイズを手計算する:
    • コンテンツ、パディング、ボーダーを考慮し、各ボックスの「実際の表示サイズ(合計の幅と高さ)」を計算する。
    • 計算結果とブラウザの表示を比較し、正しく理解できたか確認する。

初めてのWebサイトを作ろう2-5

このサイトの Lesson1-1(HTML学習の入り口)Lesson2-1(CSS学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Lesson2-5のまとめノートを作ろう

VSCを使ってlesson2フォルダの中に「MyWebsite2-5.html」というファイルを作り、下記のHTMLコードをコピーして貼り付けて下さい。

まとめノート(Lesson2-5/HTMLコード)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson2-5</title>
    <link rel="stylesheet" href="style/color.css">
    <link rel="stylesheet" href="style/text-style.css">
    <link rel="stylesheet" href="style/link.css">
    <link rel="stylesheet" href="style/box-model.css">
</head>
<body>
    <header>
        <h1>Lesson2-5 ボックスモデルを理解しよう</h1>
        <nav>
            <ul>
                <li>Lesson2-4:<a href="MyWebsite2-4.html">4種類のセレクタを使いこなそう</a></li>
                <li>Lesson2-6:<a href="MyWebSite2-6.html">ボックススタイルを変更しよう</a> </li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>1.ボックスモデルとは?</h2>
            <p>要素がどのように配置され、スペースが確保されるかを決定するCSSの基本概念。</p>
            <p><strong>構成:</strong></p>
            <ul>
                <li><strong>コンテンツボックス (content box):</strong> テキストや画像が配置される領域。</li>
                <li><strong>パディングボックス (padding box):</strong> コンテンツとボーダーの間の余白。</li>
                <li><strong>ボーダーボックス (border box):</strong> パディングを囲む枠線。</li>
                <li><strong>マージンボックス (margin box):</strong> 他の要素との間隔を確保する余白。</li>
            </ul>
        </section>
        
        <section>
            <h2>2.各領域の詳細と設定例</h2>
            <h3>コンテンツボックス:</h3>
            <p>width と height はデフォルトでこの領域に適用される。</p>
            <p>例:</p>
            <code>.content-box-example { width: 200px; height: 100px; background-color: lightblue; }</code>

            <h3>パディングボックス:</h3>
            <p>padding プロパティで四方の余白を設定可能。</p>
            <code>padding: 10px 20px; /* 上下10px, 左右20px */</code>

            <h3>ボーダーボックス:</h3>
            <p>border プロパティで枠線を指定。</p>
            <code>border: 2px solid black; /* 太さ2px、実線、黒色 */</code>

            <h3>マージンボックス:</h3>
            <p>margin プロパティで余白を設定。</p>
            <code>margin: 20px; /* 四方向20px */</code>
        </section>

        <section>
            <h2>3.サイズ計算</h2>
            <p><strong>content-box (デフォルト):</strong></p>
            <p>合計幅 = width + (padding × 2) + (border × 2)</p>
            <p><strong>border-box (推奨):</strong></p>
            <p>box-sizing: border-box; を適用すると、指定した width 内にパディングとボーダーを含む。</p>
        </section>

        <section>
            <h2>4.マージン相殺</h2>
            <p>隣接する上下のマージンは合算されず、大きい方のみ適用される。</p>
            <p><strong>防ぐ方法:</strong> 親要素に padding を加える。</p>
        </section>

        <section>
            <h2>5.学んだポイント</h2>
            <ul>
                <li>ボックスモデルは、コンテンツ → パディング → ボーダー → マージン の順で構成。</li>
                <li>サイズ計算を正確に理解し、box-sizing: border-box; を活用するとレイアウト調整が容易。</li>
                <li>マージン相殺を理解して、意図しない余白を防ぐ。</li>
            </ul>
        </section>
    </main>
    <aside>
        <p><a href="../MyWebsite.html">ページトップへ戻る</a></p>
    </aside>
    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト&問題集</p>
    </footer>
</body>
</html>

このコードをコピーしてMyWebsite2-5.htmlに張り付けてください。

続いてLesson2フォルダの中にあるstyleフォルダの中に「box-model.css」というファイルを作り、ボックスモデルを任意に指定してコードを書きましょう。

・メインタグのwidthを指定(80%を推奨)
・段落、コードの左側にマージンを指定(16pxを推奨)

ご自身で考えて書くことを推奨しますが、模範解答も用意しましたので必要な方は以下のコードを活用して下さい。

模範解答(CSSコード)
@charset "utf-8";
main {
    width: 80%; /* 任意の幅 */
    margin: 0 auto; /* 左右のマージンを自動調整 */
    padding: 20px;
}
p{
    margin-left: 16px;
}
code {
    margin-left: 16px;
}

このコードをコピーしてbox-model.cssに張り付けてください。

まとめ

お疲れさまでした!

今回の学習を通して、新たな知識やスキルを身につけることができたかと思います。

この調子でさらに理解を深めるために次のレッスンにもチャレンジしてみましょう。

継続は力なり。少しずつステップアップしていきましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る