ボックスモデルとは?ゆっくりと分かりやすく説明(html,css)

画像the-box-model-is377

こんにちは tanaka です。

今回は「ボックスモデル」の説明です。

「ボックスモデル」は、「学び始め3難」の1つです。

「学び始め3難」とは、以下の3つです。

1:ボックスモデル
2:「box-sizing」
3:widthとheight

この「ボックスモデル」は、けっこう難しいので頑張っていきましょう。

「ボックスモデル」とは、

<h1>
<div>
<p>
など

これら「HTML要素が持っている領域(※1)」のことです。

<ボックスモデルのイメージ図>

「HTML要素が持っている領域」である「ボックスモデル」は、
下のような形をしています。

画像the-box-model-is100

例えば

こんな見出しがあったとすると

画像the-box-model-is365

「ボックスモデル」は、このような感じになります。

画像the-box-model-is370

それでは、
詳しく説明していきます。

(※1)ボックスモデルは、CSSの概念ですが分かりやすくするため「HTML要素が持っている領域」と書いています。

<HTML要素とは>

HTML要素とは、

1:<h1>
2:<div>
3:<p>

など、<. >でくくられたHTMLのことです。

文字化けします

<コピー、ペーストすると文字化けします>

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

「ボックスモデル」とは?

「ボックスモデル」とは、

<h1>
<div>
<p>

これら「HTML要素が持っている領域(※1)」のことです。

「領域?」

そう領域です。

例えばこのような見出しがあったとします。

画像the-box-model-is365

これらは4つの領域を持っています。

画像the-box-model-is370

そしてこれが「ボックスモデル」です。

ここまで一気に説明しました。

しかし

この説明では、いまいちイメージがわかなかったと思います。

そこで

例を挙げながらゆっくり説明します。

(※1)ボックスモデルは、CSSの概念ですが分かりやすくするため「HTML要素が持っている領域」と書いています。

<ボックスモデルは、HTML要素の領域>

ボックスモデルとは、「HTML要素の領域」のことです。

そして

「HTML要素の領域」を分かりやすくするため「あるもの」を用意しました。

それは「見出し」です。

<h1>ピザはデザート</h1>

今からのこの見出しを使って「HTML要素の領域」を説明します。

この見出しは、表示するとこんな感じになります。

画像the-box-model-is362

見出しとしては、まぁいいでしょう。

しかし

もっと賑やかにしたいですよね。

そこで「色」を入れてみました。

それがこちら

画像the-box-model-is365

ピザ感が出て良い感じになりました。

「・・・」

話を進めます。

この「文字、色、空白」の入っているところが「HTML要素の領域」です。

この「HTML要素の領域」こそが「ボックスモデル」です。

見出しを「ボックスモデル」へ当てはめてみると、こんな感じになります。

画像the-box-model-is370

そして

「ボックスモデル」は、

1:文字の領域
2:スペースの領域
3:線の領域
4:空白の領域

これら「4つの領域」に分かれています。

画像the-box-model-is100

次は、「4つの領域」についてみていきましょう。

<ボックスモデル4つの領域>

先ほどは、「HTMLの領域」が「ボックスモデル」いうことが分かりました。

次は、「ボックスモデル4つの領域」を見ていきましょう。

「ボックスモデル」は、「文字」「スペース」「線」「空白」を入れるための
「4つの領域」があります。

この「4つの領域」は、それぞれ役割が決まっています。

画像the-box-model-is373

その役割は以下の通りです。

content = 文字、画像、子要素を入れる
padding = 内側のスペース
border = 線を入れる
margin = 外側の空白

この「役割」は、決まっていて変えることができません。

そして

この「役割」へ先ほどの見出しを当てはめると、
下のようになります。

画像the-box-model-is365
画像the-box-model-is364

これが、ボックスモデルの「4つの領域の役割」です。

次は、「4つの領域の役割」を1つずつみていきましょう。

<ここまでのまとめ>

1:HTML要素は「ボックスモデル」でできている

2:ボックスモデルは「4つの領域」からできている

3:4つの領域は「役割」が決まっている

このような感じですね。

「ボックスモデル」4つの役割

「ボックスモデル」の全体について、なんとなくわかってもらえたかと思います。

次は「ボックスモデルの4つの役割」を説明します。

content = 文字、画像、子要素を入れる
padding = 内側のスペース
border = 線を入れる
margin = 外側の空白

それぞれ、説明します。

「ボックスモデル」content(説明)

画像the-box-model-is326

「content」は、 ボックスモデルの一番内側です。

「content」とは、内容、中身という意味で
この「content」には、文字、画像、子要素などが入ります。

1:文字
2:画像
3:子要素
など

「子要素?」

と思われました?

そう子要素です。

1つ例を挙げます。

contentへ子要素を収納>

画像the-box-model-is375
画像the-box-model-is379
<ul> ←ここ基準
    <li>ごはん</li> ←子要素
    <li>おかず</li> ←子要素
    <li>吸い物</li> ←子要素
</ul>

「ごはん」「おかず」「吸い物」は、子要素です。

その子要素たちを「1つ上の<ul>のcontent」へ収納しています。

<子要素とは>

子要素とは「1つ下」のことです。

<div> ←ここが基準なら
  <p>シチューをご飯にかける</p> ←ここが子要素
</div>

ちなみに1つ上は親要素になります。

<親要素とは>

親要素とは「1つ上」のことです。

<div>
   <ul> ←ここが親要素
      <li>ごはん</li> ←ここが基準なら
      <li>おかず</li>
      <li>吸い物</li>
   </ul>
</div>

これらを子孫要素と言います。

<子孫要素とは>

子孫要素とは、「htmlの階層構造」のことです。

例えば、下のようなhtmlがあったとします。

<body>
  <main>
    <article>
      <h2>見出し</h2>
      <p>本文</p>
    </article>
  </main>
</body>

<body>の中に<main>があり、<main>の中に<article>があり

<article>の中に<h2>と<p>があります。

なぜこのような形になっているのでしょうか?

htmlは、
「関係するものをひとまとめ」にして階層構造の形で作っていくからです。

なぜ階層構造にするのでしょうか?

それは、理解しやすくするためです。

そして

この階層構造の

1つ上を親要素
1つ下を子要素

このように言います。

そして先ほどの例を当てはめてみると、以下のような関係になります。

<body> ←親要素
  <main> ←ここ基準
    <article> ←子要素
      <h2>見出し</h2> ←孫要素
      <p>本文</p>
    </article>
  </main>
</body>
親要素ここを基準に見ると子要素孫要素
bodymainarticleh1
p

このように、htmlにおける階層構造を「子孫要素」と言います。

<階層構造とは>

階層構造とは、「データーの管理方法」です。

身近な例で言えば「ファイル」「フォルダ」があります。

階層構造は、

1:箱を作り
2:その中に箱を作り
3:その中に箱を作る

このように「箱の中へ」「箱を入れること」によってデーターを管理します。

<階層構造の例>

食べ物(フォルダ)野菜(フォルダ)ニンジン(ファイル)
キャベツ(ファイル)
タマネギ(ファイル)
お肉(フォルダ)牛肉(ファイル)
豚肉(ファイル)
鶏肉(ファイル)

この方法は、あたかも層に見えるので「階層構造」と言います。

「ボックスモデル」content(例)

contentの例です。

contentへ「文字」「画像」「子要素」を入れた時の様子です。

<文字>

画像the-box-model-is358
画像the-box-model-is332
<h1>ピザはデザート</h1>

<画像>

画像the-box-model-is345
画像the-box-model-is336
 <img src="food_pizza.png">

<子要素>

画像the-box-model-is349
画像the-box-model-is340
<ul>
    <li>ごはん</li>
    <li>おかず</li>
    <li>吸い物</li>
</ul>

「ボックスモデル」padding(説明)

画像the-box-model-is327

「padding」は、「content」の周りへスペースを入れるためにあります。

「padding」とは、詰め物という意味で、「contentの周りに詰め物」をして空間を作ります。

さらに

「padding」は、色をつけることもできます。

「ボックスモデル」padding(例)

paddingの例です。

「文字」「画像」「子要素」へpaddingを入れた時の様子です。

<文字>

画像the-box-model-is359
画像the-box-model-is333
<h1>ピザはデザート</h1>

<画像>

画像the-box-model-is346
画像the-box-model-is337
 <img src="food_pizza.png">

<子要素>

画像the-box-model-is350
画像the-box-model-is341
<ul>
    <li>ごはん</li>
    <li>おかず</li>
    <li>吸い物</li>
</ul>

「ボックスモデル」border(説明)

画像the-box-model-is328

「border」は、線を入れるためにあります。

線は、たくさんの種類があり色をつけることもできます。

「ボックスモデル」border(例)

borderの例です。

「文字」「画像」「子要素」へborderを入れた時の様子です。

<文字>

画像the-box-model-is360
画像the-box-model-is334
<h1>ピザはデザート</h1>

<画像>

画像the-box-model-is347
画像the-box-model-is338
 <img src="food_pizza.png">

<子要素>

画像the-box-model-is351
画像the-box-model-is343
<ul>
    <li>ごはん</li>
    <li>おかず</li>
    <li>吸い物</li>
</ul>

「ボックスモデル」margin(説明)

画像the-box-model-is329

「margin」は、一番外へ空白を入れるためにあります。

「margin」は、空白専門なので色をつけることができません。

「ボックスモデル」margin(例)

marginの例です。

「文字」「画像」「子要素」へmarginを入れた時の様子です。

<文字>

画像the-box-model-is361
画像the-box-model-is335
<h1>ピザはデザート</h1>

<画像>

画像the-box-model-is348
画像the-box-model-is342
 <img src="food_pizza.png">

<子要素>

画像the-box-model-is352
画像the-box-model-is344
<ul>
    <li>ごはん</li>
    <li>おかず</li>
    <li>吸い物</li>
</ul>

「ボックスモデル」どのように使われる?

「ボックスモデル」は、一体どうやって使うの?

そういう疑問がわくと思います。

そこで見てもらいたいものがあります。

それは「ページ全体」です。

そして

「ページ全体」の前に、
まずは小さいところから見ていきましょう。

1つ1つのボックスモデル

ボックスモデルは、このような感じでしたね。

画像the-box-model-is100

これをこのようにして

画像the-box-model-is353

さらに、中身を入れます。

画像the-box-model-is367

なんとなく、「ボックスモデル」の使われ方のイメージはわいてきませんか?

さらに

これを並べます。

webページっぽくないですか?

画像the-box-model-is368

さらに

ボックスモデルは、単体を並べるだけでなく

「ボックスモデル」の中へ「ボックスモデル」を入れ、全体を管理することもできます。

画像the-box-model-is374

ページはボックスモデルの集合体

さらに

いつも見ているページを見てください。

全体をながめてみると、それぞれが四角く区切られていますよね。

全て「ボックスモデル」でできているからです。

そして

もっと広い見方をすると

ネットにある全てのWebページは、この「ボックスモデル」でできています。

ということは

Webページは「ボックスモデルの集合体」とも言えます。

Webページの一部

画像the-box-model-is301

ボックスモデル

画像the-box-model-is303

「ボックスモデル」どのように使う?

実際のコードでは、どのように使われるのでしょうか?

見出しのコードをみてみましょう。

画像the-box-model-is365

実は、いろいろコードが入っています。

しかし

今回は、「ボックスモデルに関係するところだけ」説明します。

<見出しのコード>

表示

画像the-box-model-is365

html

<h1 class="sample01">ピザはデザート</h1>

css

.sample01 {
  display: inline-block;

  padding: 20px;
  border: 15px solid rgb(127, 199, 44);
  margin: 20px;

  box-sizing: content-box;
  width: 500px;
  height: 80px;

  font-size: 40px;
  color: black;
  line-height: 80px;
  background-color: rgb(248, 183, 130);
  background-clip: content-box;
  text-align: center;
}

なんだか難しそうですね。

それぞれ「ボックスモデル」に当てはめてみながら説明します。

「ボックスモデル」どのように使う?(content)

「content」の具体的な使い方です。

ボックスモデル

画像the-box-model-is326

html

<h1 class="sample01">ピザはデザート</h1>

css

.sample01 {
  display: inline-block;

  padding: 20px;
  border: 15px solid rgb(127, 199, 44);
  margin: 20px;

  box-sizing: content-box;
  width: 500px;
  height: 80px;

  font-size: 40px;
  color: black;
  line-height: 80px;
  background-color: rgb(248, 183, 130);
  background-clip: content-box;
  text-align: center;
}

実は、このcontentが一番難しいかもしれません。

このcontentをコントールするには、

1:「box-sizing」
2:「width」
3:「height」

この3つが必要です。

ここで説明するとすごく長くなるので、

できれば、この記事を読み終わってから
以下の記事をご覧ください。

box-sizingとは?幅、高さに関係する重要プロパティ(html,css)

<width、heightとは?>

width、heightとは、「幅」「高さ」を決めるプロパティです。

幅 = width
高さ = height

width、heightは、「数値」「パーセント」「auto」などの指定ができます。

幅を300pxにしたい場合は、

width: 300px;

高さを500pxにしたい場合は、

height: 500px;

このように使います。

しかし

必ずしもwidth、heightへ入れた数値が「幅」「高さ」になるわけではありません。

実際の「幅」「高さ」は、以下の3つが関わり合い決定します。

1:ボックスモデル
2:「box-sizing」
3:widthとheight

3つともなかなか難しいので頑張っていきましょう。

「ボックスモデル」どのように使う?(padding)

「padding」の具体的な使い方です。

ボックスモデル

画像the-box-model-is327

html

<h1 class="sample01">ピザはデザート</h1>

css

.sample01 {
  display: inline-block;

  padding: 20px;
  border: 15px solid rgb(127, 199, 44);
  margin: 20px;

  box-sizing: content-box;
  width: 500px;
  height: 80px;

  font-size: 40px;
  color: black;
  line-height: 80px;
  background-color: rgb(248, 183, 130);
  background-clip: content-box;
  text-align: center;
}

「padding」は、さほど難しくありません。

「padding」に数値を入れるだけです。

詳しくは、下の記事をご覧ください。

cssプロパティ「padding」それは内側の空白(html,css)

「ボックスモデル」どのように使う?(border)

「border」の具体的な使い方です。

ボックスモデル

画像the-box-model-is328

html

<h1 class="sample01">ピザはデザート</h1>

css

.sample01 {
  display: inline-block;

  padding: 20px;
  border: 15px solid rgb(127, 199, 44);
  margin: 20px;

  box-sizing: content-box;
  width: 500px;
  height: 80px;

  font-size: 40px;
  color: black;
  line-height: 80px;
  background-color: rgb(248, 183, 130);
  background-clip: content-box;
  text-align: center;
}

「border」は、とても多機能です。

「border」は、線を入れる所なので「色、種類」がたくさんあります。

詳しくは、下の記事をご覧ください。

css「border」囲み線のプロパティ(html,css)

「ボックスモデル」どのように使う?「margin」

「margin」の具体的な使い方です。

ボックスモデル

画像the-box-model-is329

html

<h1 class="sample01">ピザはデザート</h1>

css

.sample01 {
  display: inline-block;

  padding: 20px;
  border: 15px solid rgb(127, 199, 44);
  margin: 20px;

  box-sizing: content-box;
  width: 500px;
  height: 80px;

  font-size: 40px;
  color: black;
  line-height: 80px;
  background-color: rgb(248, 183, 130);
  background-clip: content-box;
  text-align: center;
}

「margin」は、ここだけの話「使わない方が良い」かもしれません。

実は、この「margin」はトラブルを多く起こします。

とはいえ

必要な時もあるので、なんとも言えない所です。

marginを使わずページを作る方法もあるので、またそれらも記事にできればと思っています。

(全てフレックスボックスで作るページなんですけどね)

「ボックスモデル」まとめ

「ボックスモデル」とは、「HTML要素が持っている領域」のことです。

画像the-box-model-is100

「ボックスモデル」4つの領域があり、それぞれ役目が決まっています。

content = 文字、画像、子要素を入れる
padding = 内側のスペース
border = 線を入れる
margin = 外側の空白

そして全てのWebページは、この「ボックスモデル」でできています。

Webページの一部

画像the-box-model-is301

Webページの一部のボックスモデル

画像the-box-model-is303

以上
ボックスモデルとは?ゆっくりと分かりやすく説明(html,css)
の話でした。

ありがとうございました。

「ボックスモデル」おまけ

ボックスモデルは、「HTML要素が持っている領域」と書きましたが

正確には、CSSの概念であってHTML要素が持っている領域ではないようです。

MDNにも書いてありますし、そうなのでしょう。

しかし

どう考えても理解しやすいのは、

1:HTML側にボックスモデルがある
2:そこへ向かってCSSを働きかける

だと思います。

なので

この記事ではそのように書きました。

とはいえ

「HTML要素が持っている領域ではない!」と、おっしゃる方がいると思います。

私は、それは正しいと思います。

否定しません。

理由は「初学でのボタンの掛け違え」これほど怖いものはないからです。

はじめに違って覚えると

その後に積み上げる知識も、間違った上へ積み上げていくことになりますからね。

それに

一度間違って覚えたものを修正するのは、とても労力がいります。

(今回の「ボックスモデル」は、そこまで大げさなものではありませんけど)

しかしどうでしょう

ここで考えてみてください。

難しくで挫折する。

これを思えば、正確でなくとも覚えやすい方が良い。

そう思いませんか?

とはいえ

正しくはありません。

正確さと理解しやすさ、どちらが大切なのでしょうか?

その辺は難しいところです。

結局、何が言いたいかというと「挫折せず頑張れば、必ず希望はある」ということです。

それと

かなり難しいですけど「MDNページのボックスモデル」も見てあげてください。

以上です。

タイトルとURLをコピーしました