今回は「ボックスモデル」の説明です。
「ボックスモデル」は、「学び始め３難」の１つです。
「学び始め３難」とは、以下の３つです。
１：ボックスモデル
２：「box-sizing」
３：widthとheight
特に「ボックスモデル」「widthとheight」は、けっこう難しいので頑張っていきましょう。
詳しい説明は後にして、まずは「ボックスモデル」の全体像を説明します。
＜「ボックスモデル」大まかな説明＞
ボックスモデルとは、CSSの基本的な考え方です。
そして
ボックスモデルがHTML要素へ働きかけることにより、Webページが表示されます。
しかし
ボックスモデルを理解する方法として、
ボックスモデルは「HTML要素へ働きかける」と理解するよりも、
ボックスモデルは「HTML要素が持っている領域（※１）」と考えるほうが理解しやすいでしょう。
例えば
こんな <h2> があったとします。
ボックスモデルは「HTML要素が持っているの領域」だとすると、このような感じになります。
このように考えると理解しやすくなります。
そして
ボックスモデルには「４つの領域」があります。
１：content
２：padding
３：border
４：margin
これら「４つの領域」は、初めから役割が決まっています。
こちらの都合で役割を変えることは出来ません。
＜HTML要素とは＞
HTML要素とは、
１：<h1>
２：<div>
３：<p>
など
< >でくくられたHTMLのことです。
（※１）正確には、ボックスモデルは「HTML要素が持っている領域」ではありません。ボックスモデルは、CSSの概念だそうです。ですが、分かりやすくするため「HTML要素が持っている領域」と書いています。
【関連記事】box-sizingとは？幅、高さに関係する重要プロパティ（html,css）
＜コピー、ペーストすると文字化けします＞
このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。
十分ご注意ください。
Webページは、ボックスモデルでできている
ボックスモデルとは、CSSの基本的な考え方です。
「ボックスモデル」とは、下のような形をしています。
そして
ほぼ、すべてのWebページは、この「ボックスモデル」でできています。
Webページは、ボックスモデルの集合体
次は、ボックスモデルがWebページで「どのように使われているか」を見ていきます。
説明を分かりやすくするため「ボックスモデル」をちょっといじって「Webページっぽいもの」を作ってみます。
「ボックスモデル」とは、下のような形です。
これをこのようにして
さらに、文字を入れ、形をととのえます。
それっぽい物ができました。
さらに
それっぽい物をたくさん作ります。それっぽい物を並べていきます。
すると「Webページ」の完成です。
このように
Webページは、１つ１つのボックスモデルがたくさん集まった「ボックスモデルの集合体」でできています。
「ボックスモデル」へ「ボックスモデル」を入れることもできる
さらに
ボックスモデルは、たくさん並べるだけでなく
「ボックスモデル」の中へ「ボックスモデル」を入れることもできます。
なぜ「ボックスモデル」の中へ「ボックスモデル」を入れるのでしょうか？
それは、小さい１つ１つのボックスモデルを「大きなボックスモデルへ入れて管理」するためです。
＜ここまでの小まとめ＞
Webページは、ボックスモデルの集合体
ボックスモデルは、ボックスモデルへ入れることができる
ボックスモデルは「CSSの基本的な考え方」
Webページは「ボックスモデルの集合体」ということがわかりました。
それでは
ボックスモデルは、具体的にどこにあるのでしょうか？
実は、
ボックスモデルは「CSSの基本的な考え方」であって、どこにあるという物ではありません。
しかし
あえて「ここにあります」とこじつけるなら
ボックスモデルは「HTML要素」にあると言えるかもしれません。
さらに
ボックスモデルは「HTML要素が持っている領域」と考えると理解しやすくなります（※１）。
それを今から説明します。
（※１）正確には、ボックスモデルは「HTML要素が持っている領域」ではありません。ボックスモデルは、CSSの概念だそうです。ですが、分かりやすくするため「HTML要素が持っている領域」と書いています。
ボックスモデルは「HTML要素が持っている領域」とイメージ
説明をしやすくするため「見出し」を１つ用意しました。
HTML
<h2>ピザはデザート</h2>出力結果
そして
ボックスモデルが「HTML要素が持っている領域」であるとすれば、以下のような感じになります。
ボックスモデル
どうですか？
イメージしてみてください。
<h2> に領域があり、そこへ「文字」「背景色」「枠線」が入っている。
出力結果
ボックスモデル
「<h2>が領域を持っている」と考えると分かりやすくないですか？
そして
この「HTML要素が持っている領域」は、<h2> だけでなく
<div>
<img>
<p>
これらを含め、すべての「HTML要素」も同様のことが言えます。
<div> にも「領域」があり
<img> にも「領域」があり、
<p> にも「領域」があります。
そう考えると理解しやすくなります（※１）。
（※１）正確には、ボックスモデルは「HTML要素が持っている領域」ではありません。ボックスモデルは、CSSの概念だそうです。ですが、分かりやすくするため「HTML要素が持っている領域」と書いています。
＜HTML要素とは＞
HTML要素とは,
<h1>
<div>
<p>
などのことです。
＜ここまでの小まとめ＞
ボックスモデルは「HTML要素が持っている領域」と考えると理解しやすい（※１）。
ボックスモデル「４つの領域」
ボックスモデルは「HTML要素が持っている領域」と考えると理解しやすいことがわかりました。
次は「ボックスモデルの構成」を見ていきましょう。
ボックスモデルは「４つの領域」で構成されています。
＜ボックスモデル「４つの領域」＞
このようにボックスモデルは「４つの領域」で構成されています。
content ＝ 文字、画像、子要素を入れる場所
padding ＝ 内側のスペース
border ＝ 線を入れる
margin ＝ 外側の空白
これら４つの領域は「役割」が決まっています。
＜ここまでの小まとめ＞
ボックスモデルには「４つの領域」がある。
１：content ＝ 文字、画像、子要素を入れる場所
２：padding ＝ 内側のスペース
３：border ＝ 線を入れる
４：margin ＝ 外側の空白
これら４つは「役割」が決まっている
「４つの領域」役割
次は「４つの領域」それぞれの役割を見ていきましょう。
１：content ＝ 文字、画像、子要素を入れる場所
２：padding ＝ 内側のスペース
３：border ＝ 線を入れる
４：margin ＝ 外側の空白
一つずつ説明していきます。
content「文字」「画像」「子要素」を入れる場所
contentは「文字」「画像」「子要素」などを入れるためにあります。
この領域はとても大切です。
なぜなら
Webページで表示する「文字」「画像」を入れるところだからです。
逆にいうと、そのほかの「padding」「border」「margin」は、contentに対しての装飾です。
仮に「padding」「border」「margin」が無くてもWebページは表示されます。
なので
contentは、とても大切な領域と言えます。
１：content ＝ 「文字」「画像」を入れる領域
２：padding ＝ contentへの装飾
３：border ＝ contentへの装飾
４：margin ＝ contentへの装飾
さらに
contentは「ボックスモデル」の中へ「ボックスモデル」を入れる時にも使われます。（子要素）
「ボックスモデル」の中へ「ボックスモデル」を入れると、基本的に「親要素contentの左上へ置かれる」ように出来ています。
（子要素は「float」「flex-box」「position」などの使用によって、親要素contentの左上へ置かれない場合もあります）
contentの例
contentへ文字を入れた時の例です。
出力結果
ボックスモデル
HTML
<h2>ピザはデザート</h2>CSS
h2 {
font-size: 40px;
}padding「最内側のスペース」バックスクリーンも入れられる
paddingは、contentの周りへ適切な空間を入れるためにあります。
背景色（バックスクリーン）を入れることができます。
paddingの例
先ほどの文字へ、paddingを入れた時の例です。（背景色：明るい緑色を入れました）
出力結果
ボックスモデル
HTML
<h2>ピザはデザート</h2>CSS
h2 {
font-size: 40px;
background-color: lawngreen;
padding: 20px;
}border「線を入れる」
borderは、線を入れるためにあります。
線には、さまざまな種類があります。
borderの例
先ほどの文字へ、borderを入れた時の例です。（黒い線です）
出力結果
ボックスモデル
HTML
<h2>ピザはデザート</h2>CSS
h2 {
font-size: 40px;
background-color: lawngreen;
padding: 20px;
border: 5px solid black;
}margin「透明の空白」
「margin」は、一番外へ透明の空白を入れるためにあります。
「margin」は、空白専門なので色をつけることができません。
marginの例
先ほどの文字へ、marginを入れた時の例です。
出力結果
ボックスモデル
HTML
<h2>ピザはデザート</h2>CSS
h2 {
font-size: 40px;
background-color: lawngreen;
padding: 20px;
border: 5px solid black;
margin: 20px;
}ボックスモデルとWebページの見本
最後に、ボックスモデルの使用例として「Webページの見本」を用意しました。
ボックスモデルと照らし合わせながら、なんとなく見ていってください。
＜Webページの見本＞
出力結果
ボックスモデル
article01、p01は「CSSの同じ機能をまとめるため」に使っています。
HTML
<section class="section-pizza01">
<article class="article01 article-pizza01">
<img class="pizza-img" src="pizza-img01.png" alt="画像普通のピザ">
<p class="p01 p-pizza01">私はピザが好きである。<br><br> 好きなピザはピザーラである。理由は日本発祥ということもあり、日本人にぴったりの味付けだからである。</p>
</article>
<article class="article01 article-pizza02">
<img class="pizza-img" src="pizza-img02.png" alt="画像ピザトースト">
<p class="p01 p-pizza02">私はピザトーストが好きである。<br><br> 自宅で手軽にできてしかもウマイ。トッピングも自分で選べ、しかも安上がり。良いことづくめである。</p>
</article>
<article class="article01 article-pizza03">
<img class="pizza-img" src="pizza-img03.png" alt="画像ピザまん">
<p class="p01 p-pizza03">私はピザまんが好きである。<br><br> 初めて食べた時は酸味に驚いたが、これはこれで肉まん生地にとてもよく合い。美味である。</p>
</article>
</section>CSS
* {
font-size: 16px;
line-height: 1.5;
padding: 0;
border-width: 0;
margin: 0;
box-sizing: border-box;
}
.section-pizza01 {
display: flex;
justify-content: space-evenly;
width: 1050px;
}
.pizza-img {
width: 100%;
}
.article01 {
width: 32%;
padding: 10px;
display: flex;
flex-direction: column;
}
.article-pizza01 {
border: lightcoral solid 5px;
}
.article-pizza02 {
border: yellowgreen solid 5px;
}
.article-pizza03 {
border: lightskyblue solid 5px;
}
.p01 {
padding: 10px;
}
.p-pizza01 {
background-color: rgb(248, 217, 222);
}
.p-pizza02 {
background-color: rgb(233, 253, 192);
}
.p-pizza03 {
background-color: rgb(198, 231, 252);
}「ボックスモデル」まとめ
１：ボックスモデルは「HTML要素の領域」と考えると理解しやすくなる（※１）。
２：領域は、４つある
３：領域は、役割が決まっている
（※１）正確には、ボックスモデルは「HTML要素の領域」ではありません。ボックスモデルは、CSSの概念だそうです。ですが、分かりやすくするため「HTML要素の領域」と書いています。
おまけ
かなり難しいですけど「MDNページのボックスモデル」も読んでみてください。
ほんとに難しいですけど。
ほんとに
以上です。
【関連記事】box-sizingとは？幅、高さに関係する重要プロパティ（html,css）
以上
ボックスモデルとは？ゆっくりと分かりやすく説明（html,css）
の話でした。
ありがとうございました。
【広告】
＜20代〜30代でのフリーランス、副業を目指すなら オンラインプログラミングスクール「デイトラ」＞
