こんにちは tanaka です。
今回は「ボックスモデル」の説明です。
「ボックスモデル」は、「学び始め３難」の１つです。
「学び始め３難」とは、以下の３つです。
１：ボックスモデル
２：「box-sizing」
３：widthとheight
この「ボックスモデル」は、けっこう難しいので頑張っていきましょう。
「ボックスモデル」とは、
<h1>
<div>
<p>
など
これら「HTML要素が持っている領域（※１）」のことです。
＜ボックスモデルのイメージ図＞
「HTML要素が持っている領域」である「ボックスモデル」は、
下のような形をしています。
例えば
こんな見出しがあったとすると
「ボックスモデル」は、このような感じになります。
それでは、
詳しく説明していきます。
（※１）ボックスモデルは、CSSの概念ですが分かりやすくするため「HTML要素が持っている領域」と書いています。
＜HTML要素とは＞
HTML要素とは、
１：<h1>
２：<div>
３：<p>
など、<. >でくくられたHTMLのことです。
＜コピー、ペーストすると文字化けします＞
このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。
十分ご注意ください。
- 「ボックスモデル」とは？
- 「ボックスモデル」４つの役割
- 「ボックスモデル」content（説明）
- 「ボックスモデル」content（例）
- 「ボックスモデル」padding（説明）
- 「ボックスモデル」padding（例）
- 「ボックスモデル」border（説明）
- 「ボックスモデル」border（例）
- 「ボックスモデル」margin（説明）
- 「ボックスモデル」margin（例）
- 「ボックスモデル」どのように使われる？
- 「ボックスモデル」どのように使う？
- 「ボックスモデル」どのように使う？（content）
- 「ボックスモデル」どのように使う？（padding）
- 「ボックスモデル」どのように使う？（border）
- 「ボックスモデル」どのように使う？「margin」
- 「ボックスモデル」まとめ
- 「ボックスモデル」おまけ
「ボックスモデル」とは？
「ボックスモデル」とは、
<h1>
<div>
<p>
これら「HTML要素が持っている領域（※１）」のことです。
「領域？」
そう領域です。
例えばこのような見出しがあったとします。
これらは４つの領域を持っています。
そしてこれが「ボックスモデル」です。
ここまで一気に説明しました。
しかし
この説明では、いまいちイメージがわかなかったと思います。
そこで
例を挙げながらゆっくり説明します。
（※１）ボックスモデルは、CSSの概念ですが分かりやすくするため「HTML要素が持っている領域」と書いています。
＜ボックスモデルは、HTML要素の領域＞
ボックスモデルとは、「HTML要素の領域」のことです。
そして
「HTML要素の領域」を分かりやすくするため「あるもの」を用意しました。
それは「見出し」です。
<h1>ピザはデザート</h1>今からのこの見出しを使って「HTML要素の領域」を説明します。
この見出しは、表示するとこんな感じになります。
見出しとしては、まぁいいでしょう。
しかし
もっと賑やかにしたいですよね。
そこで「色」を入れてみました。
それがこちら
ピザ感が出て良い感じになりました。
「・・・」
話を進めます。
この「文字、色、空白」の入っているところが「HTML要素の領域」です。
この「HTML要素の領域」こそが「ボックスモデル」です。
見出しを「ボックスモデル」へ当てはめてみると、こんな感じになります。
そして
「ボックスモデル」は、
１：文字の領域
２：スペースの領域
３：線の領域
４：空白の領域
これら「４つの領域」に分かれています。
次は、「４つの領域」についてみていきましょう。
＜ボックスモデル４つの領域＞
先ほどは、「HTMLの領域」が「ボックスモデル」いうことが分かりました。
次は、「ボックスモデル４つの領域」を見ていきましょう。
「ボックスモデル」は、「文字」「スペース」「線」「空白」を入れるための
「４つの領域」があります。
この「４つの領域」は、それぞれ役割が決まっています。
その役割は以下の通りです。
content ＝ 文字、画像、子要素を入れる
padding ＝ 内側のスペース
border ＝ 線を入れる
margin ＝ 外側の空白
この「役割」は、決まっていて変えることができません。
そして
この「役割」へ先ほどの見出しを当てはめると、
下のようになります。
これが、ボックスモデルの「４つの領域の役割」です。
次は、「４つの領域の役割」を１つずつみていきましょう。
＜ここまでのまとめ＞
１：HTML要素は「ボックスモデル」でできている
２：ボックスモデルは「４つの領域」からできている
３：４つの領域は「役割」が決まっている
このような感じですね。
「ボックスモデル」４つの役割
「ボックスモデル」の全体について、なんとなくわかってもらえたかと思います。
次は「ボックスモデルの４つの役割」を説明します。
content ＝ 文字、画像、子要素を入れる
padding ＝ 内側のスペース
border ＝ 線を入れる
margin ＝ 外側の空白
それぞれ、説明します。
「ボックスモデル」content（説明）
「content」は、 ボックスモデルの一番内側です。
「content」とは、内容、中身という意味で
この「content」には、文字、画像、子要素などが入ります。
１：文字
２：画像
３：子要素
など
「子要素？」
と思われました？
そう子要素です。
１つ例を挙げます。
＜contentへ子要素を収納＞
<ul> ←ここ基準
<li>ごはん</li> ←子要素
<li>おかず</li> ←子要素
<li>吸い物</li> ←子要素
</ul>「ごはん」「おかず」「吸い物」は、子要素です。
その子要素たちを「１つ上の<ul>のcontent」へ収納しています。
＜子要素とは＞
子要素とは「１つ下」のことです。
<div> ←ここが基準なら
<p>シチューをご飯にかける</p> ←ここが子要素
</div>ちなみに１つ上は親要素になります。
＜親要素とは＞
親要素とは「１つ上」のことです。
<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は、
「関係するものをひとまとめ」にして階層構造の形で作っていくからです。
なぜ階層構造にするのでしょうか？
それは、理解しやすくするためです。
そして
この階層構造の
１つ上を親要素
１つ下を子要素
このように言います。
そして先ほどの例を当てはめてみると、以下のような関係になります。
<body> ←親要素
<main> ←ここ基準
<article> ←子要素
<h2>見出し</h2> ←孫要素
<p>本文</p>
</article>
</main>
</body>| 親要素 | ここを基準に見ると | 子要素 | 孫要素 |
| body | main | article | h1 p |
このように、htmlにおける階層構造を「子孫要素」と言います。
＜階層構造とは＞
階層構造とは、「データーの管理方法」です。
身近な例で言えば「ファイル」「フォルダ」があります。
階層構造は、
１：箱を作り
２：その中に箱を作り
３：その中に箱を作る
このように「箱の中へ」「箱を入れること」によってデーターを管理します。
＜階層構造の例＞
| 食べ物（フォルダ） | → | 野菜（フォルダ） | → | ニンジン（ファイル） |
| → | キャベツ（ファイル） | |||
| → | タマネギ（ファイル） | |||
| → | お肉（フォルダ） | → | 牛肉（ファイル） | |
| → | 豚肉（ファイル） | |||
| → | 鶏肉（ファイル） |
この方法は、あたかも層に見えるので「階層構造」と言います。
「ボックスモデル」content（例）
contentの例です。
contentへ「文字」「画像」「子要素」を入れた時の様子です。
＜文字＞
<h1>ピザはデザート</h1>＜画像＞
<img src="food_pizza.png">＜子要素＞
<ul>
<li>ごはん</li>
<li>おかず</li>
<li>吸い物</li>
</ul>「ボックスモデル」padding（説明）
「padding」は、「content」の周りへスペースを入れるためにあります。
「padding」とは、詰め物という意味で、「contentの周りに詰め物」をして空間を作ります。
さらに
「padding」は、色をつけることもできます。
「ボックスモデル」padding（例）
paddingの例です。
「文字」「画像」「子要素」へpaddingを入れた時の様子です。
＜文字＞
<h1>ピザはデザート</h1>＜画像＞
<img src="food_pizza.png">＜子要素＞
<ul>
<li>ごはん</li>
<li>おかず</li>
<li>吸い物</li>
</ul>「ボックスモデル」border（説明）
「border」は、線を入れるためにあります。
線は、たくさんの種類があり色をつけることもできます。
「ボックスモデル」border（例）
borderの例です。
「文字」「画像」「子要素」へborderを入れた時の様子です。
＜文字＞
<h1>ピザはデザート</h1>＜画像＞
<img src="food_pizza.png">＜子要素＞
<ul>
<li>ごはん</li>
<li>おかず</li>
<li>吸い物</li>
</ul>「ボックスモデル」margin（説明）
「margin」は、一番外へ空白を入れるためにあります。
「margin」は、空白専門なので色をつけることができません。
「ボックスモデル」margin（例）
marginの例です。
「文字」「画像」「子要素」へmarginを入れた時の様子です。
＜文字＞
<h1>ピザはデザート</h1>＜画像＞
<img src="food_pizza.png">＜子要素＞
<ul>
<li>ごはん</li>
<li>おかず</li>
<li>吸い物</li>
</ul>「ボックスモデル」どのように使われる？
「ボックスモデル」は、一体どうやって使うの？
そういう疑問がわくと思います。
そこで見てもらいたいものがあります。
それは「ページ全体」です。
そして
「ページ全体」の前に、
まずは小さいところから見ていきましょう。
１つ１つのボックスモデル
ボックスモデルは、このような感じでしたね。
これをこのようにして
さらに、中身を入れます。
なんとなく、「ボックスモデル」の使われ方のイメージはわいてきませんか？
さらに
これを並べます。
webページっぽくないですか？
さらに
ボックスモデルは、単体を並べるだけでなく
「ボックスモデル」の中へ「ボックスモデル」を入れ、全体を管理することもできます。
ページはボックスモデルの集合体
さらに
いつも見ているページを見てください。
全体をながめてみると、それぞれが四角く区切られていますよね。
全て「ボックスモデル」でできているからです。
そして
もっと広い見方をすると
ネットにある全てのWebページは、この「ボックスモデル」でできています。
ということは
Webページは「ボックスモデルの集合体」とも言えます。
Webページの一部
ボックスモデル
「ボックスモデル」どのように使う？
実際のコードでは、どのように使われるのでしょうか？
見出しのコードをみてみましょう。
実は、いろいろコードが入っています。
しかし
今回は、「ボックスモデルに関係するところだけ」説明します。
＜見出しのコード＞
表示
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」の具体的な使い方です。
ボックスモデル
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をコントールするには、
１：「box-sizing」
２：「width」
３：「height」
この３つが必要です。
ここで説明するとすごく長くなるので、
できれば、この記事を読み終わってから
以下の記事をご覧ください。
box-sizingとは？幅、高さに関係する重要プロパティ（html,css）
＜width、heightとは？＞
width、heightとは、「幅」「高さ」を決めるプロパティです。
幅 ＝ width
高さ ＝ height
width、heightは、「数値」「パーセント」「auto」などの指定ができます。
幅を300pxにしたい場合は、
width: 300px;高さを500pxにしたい場合は、
height: 500px;このように使います。
しかし
必ずしもwidth、heightへ入れた数値が「幅」「高さ」になるわけではありません。
実際の「幅」「高さ」は、以下の３つが関わり合い決定します。
１：ボックスモデル
２：「box-sizing」
３：widthとheight
３つともなかなか難しいので頑張っていきましょう。
「ボックスモデル」どのように使う？（padding）
「padding」の具体的な使い方です。
ボックスモデル
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」の具体的な使い方です。
ボックスモデル
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」の具体的な使い方です。
ボックスモデル
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要素が持っている領域」のことです。
「ボックスモデル」４つの領域があり、それぞれ役目が決まっています。
content ＝ 文字、画像、子要素を入れる
padding ＝ 内側のスペース
border ＝ 線を入れる
margin ＝ 外側の空白
そして全てのWebページは、この「ボックスモデル」でできています。
Webページの一部
Webページの一部のボックスモデル
以上
ボックスモデルとは？ゆっくりと分かりやすく説明（html,css）
の話でした。
ありがとうございました。
「ボックスモデル」おまけ
ボックスモデルは、「HTML要素が持っている領域」と書きましたが
正確には、CSSの概念であってHTML要素が持っている領域ではないようです。
MDNにも書いてありますし、そうなのでしょう。
しかし
どう考えても理解しやすいのは、
１：HTML側にボックスモデルがある
２：そこへ向かってCSSを働きかける
だと思います。
なので
この記事ではそのように書きました。
とはいえ
「HTML要素が持っている領域ではない！」と、おっしゃる方がいると思います。
私は、それは正しいと思います。
否定しません。
理由は「初学でのボタンの掛け違え」これほど怖いものはないからです。
はじめに違って覚えると
その後に積み上げる知識も、間違った上へ積み上げていくことになりますからね。
それに
一度間違って覚えたものを修正するのは、とても労力がいります。
（今回の「ボックスモデル」は、そこまで大げさなものではありませんけど）
しかしどうでしょう
ここで考えてみてください。
難しくで挫折する。
これを思えば、正確でなくとも覚えやすい方が良い。
そう思いませんか？
とはいえ
正しくはありません。
正確さと理解しやすさ、どちらが大切なのでしょうか？
その辺は難しいところです。
結局、何が言いたいかというと「挫折せず頑張れば、必ず希望はある」ということです。
それと
かなり難しいですけど「MDNページのボックスモデル」も見てあげてください。
以上です。