< 【初心者向け】CSSボックスモデル完全ガイド｜仕組み・構成・サイズ計算を徹底解説
ながみえ
HTML/CSSレッスン2-5『ボックスモデルを理解しよう』記事用アイキャッチ画像

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

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

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

CSSの「ボックスモデル」は、段落や見出し、画像などの要素をどのように配置し、サイズを決定するかを理解するための基本的な概念です。

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

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

<<前のページ

HTML/CSSレッスン2-4『4種類のセレクタを使いこなそう｜基本から実践まで』記事用アイキャッチ画像

HTML/CSSの記事一覧

HTML/CSS学習カテゴリの親ページ用アイキャッチ画像（Webサイト制作入門）、記事一覧へのリンク案内

次のページ>>

HTML/CSSレッスン2-6『ボックススタイルを変更しよう』記事用アイキャッチ画像

CSSボックスモデルの概要｜初心者が理解すべき基本概念

【CSS】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

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

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

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

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

CSSのボックスモデルを示す図解。margin、border、padding、contentボックスの構造を解説。

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

例えば要素の幅や高さを指定すると、デフォルトではコンテンツボックスのサイズが変わり、ボーダーやパディング、マージンはそれに応じて変化することになります。

CSSボックスモデルの構成要素｜4つのボックスを徹底解説

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

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

コンテンツボックス（content box）｜内容領域の役割と特徴

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

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

すなわち、要素の高さを20pxに指定した場合、その要素の枠線（ボーダー）は20pxより大きくなるということです。

<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;        /* ボーダーの色を指定 */
  • ボーダーを設定すると要素の合計サイズが増加します。
  • ボーダーのスタイルには、solid、dashed、dotted などがあります。

マージンボックス（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】勉強猫がノートパソコンを見ながら考え込む様子。記事内の休憩用イラスト

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

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

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

初期状態のボックスモデル挙動｜widthとheightの範囲を理解

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

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

例えば「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; を使用すると、width と height がパディングやボーダーが含まれた状態で計算されます。
  • これにより、意図したレイアウトを正確に保ちやすくなります。

まとめ

  • 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】勉強猫がノートパソコンを見ながら考え込む様子。記事内の休憩用イラスト

CSSマージンの相殺（margin collapse）

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;
}

CSSボックスモデルのサンプルコード集｜基本・box-sizing・マージン相殺の実例

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

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

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

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

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

<!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>
.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-box と border-box の違いを視覚的に確認できます。

<div class="content-box-example">content-box</div>
<div class="border-box-example">border-box</div>
.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: 指定した width と height の中にパディングとボーダーが含まれる。

マージン相殺の例｜複数ボックス配置での現象を実演

以下のコードをブラウザ表示し、どのようにマージンが影響を受けるか確認しましょう。

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

.box1 {
    margin-bottom: 40px;
}

.box2 {
    margin-top: 20px;
}

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

CSSボックスモデルまとめ｜重要ポイントを総整理

CSSのボックスモデルを示す図解。margin、border、padding、contentボックスの構造を解説。

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

学習したポイント

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

お疲れさまでした！

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

次回も頑張りましょう！

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

【CSS】勉強猫がノートパソコンに向かい、練習問題に挑戦する様子。記事内の休憩用イラスト

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

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

黒枠の外側ボックスの中に水色の内側ボックスが配置され、『内側のボックス』と表示されているHTMLと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学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」

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

Q
Webサイト制作に挑戦する人はここをクリック！

自分だけのWebサイト制作にはベースとなる基本セットが必要になります。

まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。

Lesson2-5のまとめノートと練習問題を追加しよう

このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。

１．練習問題の解答を保存

練習問題2-5で作成した２つのファイルを学習フォルダの中に保存しましょう。

  • training2-5.html ⇒ Lesson2フォルダに保存
  • training2-5.css ⇒ Lesson2フォルダの中のstyleフォルダに保存

トップページからリンクで飛べるようになりますので確認しましょう。

２．まとめノートを作成・保存

下記のHTMLコードは、このLesson2-5で紹介した内容を端的にまとめてブラウザ表示するためのコードです。

これをコピーして「MyWebsite2-5.html」という名前で保存し、「lesson2（学習フォルダ）」の中に保存してください。

<!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/styles-lesson2.css">
</head>
<body>

    <h1>Lesson2-5：ボックスモデルを理解しよう</h1>

    <div class="container">
        <h2>目的・要点</h2>
        <p>
            CSSの「ボックスモデル」は、ウェブページの要素がどのように配置され、
            サイズが決定されるかを理解するための基本概念です。
            すべてのHTML要素は見えない「ボックス」として扱われ、コンテンツ、
            パディング、ボーダー、マージンという4つの領域で構成されています。
        </p>

        <h2>本レッスンの到達目標</h2>
        <p>
            CSSボックスモデルの仕組みを理解し、それぞれのプロパティを適切に設定できるようになることです。
        </p>

        <h2>このレッスンで学習した内容</h2>

        <h3>CSSボックスモデルの構成要素</h3>
        <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>

        <h3>各ボックスの設定方法</h3>
        <ul>
            <li><code>padding: 20px;</code> → 内側の余白を設定</li>
            <li><code>border: 2px solid black;</code> → ボーダーの太さ、スタイル、色を設定</li>
            <li><code>margin: 30px;</code> → 外側の余白を設定</li>
        </ul>

        <h3>ボックスサイズの計算方法</h3>
        <ul>
            <li><strong>デフォルト（content-box）</strong>: width や height に指定された値はコンテンツボックスに適用されるため、
                パディングやボーダーが追加されると全体のサイズが大きくなる。</li>
            <li><strong><code>box-sizing: border-box;</code> の活用</strong>: width や height にパディングとボーダーが含まれるため、
                指定したサイズのまま表示できる。</li>
        </ul>

        <h3>マージン相殺（margin collapse）</h3>
        <ul>
            <li>隣接する2つの要素の上下マージンが重なった場合、大きい方の値が適用され、合算されない現象。</li>
            <li>解決方法として、親要素に <code>padding</code> を設定するなどの方法がある。</li>
        </ul>

        <h2>トピック・豆知識</h2>
        <ul>
            <li><code>box-sizing</code> の設定を適切に行うことで、意図したレイアウトを作成しやすくなる。</li>
            <li>パディングとボーダーを適用すると、デフォルト設定では要素のサイズが変わるため、
                レイアウトが崩れる原因になることがある。</li>
            <li>マージン相殺を防ぐには、<code>display: flex;</code> や <code>overflow: hidden;</code> を活用する方法もある。</li>
        </ul>

        <h2>まとめ</h2>
        <p>
            本レッスンでは、CSSボックスモデルの基本構造と設定方法について学びました。
        </p>
        <p>
            ボックスモデルを適切に活用することで、意図したレイアウトやデザインを正確に実現できます。
        </p>
        <p><a href="../MyWebsite.html">トップページへ戻る</a></p>
    </div>

    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト＆問題集</p>
    </footer>

</body>
</html>

これでLesson2-5の作業は完了です。

継続は力なり。次のLessonも、引き続き頑張ってください^^

<<前のページ

HTML/CSSレッスン2-4『4種類のセレクタを使いこなそう｜基本から実践まで』記事用アイキャッチ画像

HTML/CSSの記事一覧

HTML/CSS学習カテゴリの親ページ用アイキャッチ画像（Webサイト制作入門）、記事一覧へのリンク案内

次のページ>>

HTML/CSSレッスン2-6『ボックススタイルを変更しよう』記事用アイキャッチ画像

FAQ｜CSSボックスモデルに関するよくある質問

Q
Q1. box-sizingでborder-boxを設定すると、widthやheightはどう変わりますか？

box-sizing: border-box;を設定すると、widthやheightはパディングとボーダーを含めたサイズとして計算されます。

初心者はこの違いで混乱しやすいので、content-boxとの挙動を比較して練習するのがおすすめです。

Q
Q2. マージン相殺（margin collapse）はなぜ発生するのですか？

上下に隣接する2つのボックスのマージンが重なり、一方のマージンが消える現象が「マージン相殺」です。

特に親子要素や兄弟要素間で起こりやすく、余白が思った通りに出ない原因となります。

詳しい実例は「マージンの相殺」のセクションで確認しましょう。

Q
Q3. ボックスモデルでpaddingとmarginの違いは何ですか？

paddingは「ボーダーの内側の余白（内側のスペース）」で、marginは「ボーダーの外側の余白（外側のスペース）」です。

この違いは、実際にボーダーを可視化することで理解が深まります。

CSSのボックスモデルを示す図解。margin、border、padding、contentボックスの構造を解説。

サンプルコードも使って実際に確認してみましょう。

Q
Q4. ブロック要素とインライン要素でボックスモデルの挙動は異なりますか？

はい、異なります。

ブロック要素はwidthやheight、padding、marginが有効ですが、インライン要素はwidthやheightが無視され、paddingやmarginも横方向にのみ反映されます。

より詳しい仕組みは「CSS応用編」の「ボックスの配置の基礎」で解説しますので、そちらもご確認ください。

Q
Q5. ボックスモデルのサイズ計算でautoはどう機能しますか？

autoはブラウザが自動的にサイズを計算する値です。例えば、width: auto;は親要素の幅に応じて自動調整されます。

margin: auto;は中央寄せに使われることが多いです。

ボックスモデルのサイズ計算を理解することで、autoの動きがわかりやすくなりますので、このレッスンの実例コードで試してみましょう。

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

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

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

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

記事URLをコピーしました