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

画像the-box-model-is377

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

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

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

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

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

詳しい説明は後にして、まずは「ボックスモデル」の全体像を説明します。

<「ボックスモデル」大まかな説明>

ボックスモデルとは、CSSの基本的な考え方です。

画像the-box-model-is003

そして

ボックスモデルがHTML要素へ働きかけることにより、Webページが表示されます。

しかし

ボックスモデルを理解する方法として、

ボックスモデルは「HTML要素へ働きかける」と理解するよりも、

ボックスモデルは「HTML要素が持っている領域(※1)」と考えるほうが理解しやすいでしょう。

例えば

こんな <h2> があったとします。

画像the-box-model-is365

ボックスモデルは「HTML要素が持っているの領域」だとすると、このような感じになります。

画像the-box-model-is370

このように考えると理解しやすくなります。

そして

ボックスモデルには「4つの領域」があります。

1:content
2:padding
3:border
4:margin

これら「4つの領域」は、初めから役割が決まっています。

こちらの都合で役割を変えることは出来ません。

<HTML要素とは>

HTML要素とは、

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

など

< >でくくられたHTMLのことです。

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

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

文字化けします

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

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

十分ご注意ください。

Webページは、ボックスモデルでできている

ボックスモデルとは、CSSの基本的な考え方です。

「ボックスモデル」とは、下のような形をしています。

画像the-box-model-is003

そして

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

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

次は、ボックスモデルがWebページで「どのように使われているか」を見ていきます。

説明を分かりやすくするため「ボックスモデル」をちょっといじって「Webページっぽいもの」を作ってみます。

「ボックスモデル」とは、下のような形です。

画像the-box-model-is003

これをこのようにして

画像the-box-model-is353

さらに、文字を入れ、形をととのえます。

画像the-box-model-is367

それっぽい物ができました。

さらに

それっぽい物をたくさん作ります。それっぽい物を並べていきます。

すると「Webページ」の完成です。

画像the-box-model-is368

このように

Webページは、1つ1つのボックスモデルがたくさん集まった「ボックスモデルの集合体」でできています。

「ボックスモデル」へ「ボックスモデル」を入れることもできる

さらに

ボックスモデルは、たくさん並べるだけでなく

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

画像the-box-model-is374

なぜ「ボックスモデル」の中へ「ボックスモデル」を入れるのでしょうか?

それは、小さい1つ1つのボックスモデルを「大きなボックスモデルへ入れて管理」するためです。

<ここまでの小まとめ>

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

ボックスモデルは、ボックスモデルへ入れることができる

ボックスモデルは「CSSの基本的な考え方」

Webページは「ボックスモデルの集合体」ということがわかりました。

それでは

ボックスモデルは、具体的にどこにあるのでしょうか?

実は、

ボックスモデルは「CSSの基本的な考え方」であって、どこにあるという物ではありません。

しかし

あえて「ここにあります」とこじつけるなら

ボックスモデルは「HTML要素」にあると言えるかもしれません。

さらに

ボックスモデルは「HTML要素が持っている領域」と考えると理解しやすくなります(※1)。

それを今から説明します。

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

ボックスモデルは「HTML要素が持っている領域」とイメージ

説明をしやすくするため「見出し」を1つ用意しました。

HTML

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

出力結果

画像the-box-model-is365

そして

ボックスモデルが「HTML要素が持っている領域」であるとすれば、以下のような感じになります。

ボックスモデル

画像the-box-model-is370

どうですか?

イメージしてみてください。

<h2> に領域があり、そこへ「文字」「背景色」「枠線」が入っている。

出力結果

画像the-box-model-is365

ボックスモデル

画像the-box-model-is370

「<h2>が領域を持っている」と考えると分かりやすくないですか?

そして

この「HTML要素が持っている領域」は、<h2> だけでなく

<div>
<img>
<p>

これらを含め、すべての「HTML要素」も同様のことが言えます。

<div> にも「領域」があり

<img> にも「領域」があり、

<p> にも「領域」があります。

そう考えると理解しやすくなります(※1)。

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

<HTML要素とは>

HTML要素とは,

<h1>
<div>
<p>

などのことです。

<ここまでの小まとめ>

ボックスモデルは「HTML要素が持っている領域」と考えると理解しやすい(※1)。

ボックスモデル「4つの領域」

ボックスモデルは「HTML要素が持っている領域」と考えると理解しやすいことがわかりました。

次は「ボックスモデルの構成」を見ていきましょう。

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

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

このようにボックスモデルは「4つの領域」で構成されています。

画像the-box-model-is004

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

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

<ここまでの小まとめ>

ボックスモデルには「4つの領域」がある。

1:content = 文字、画像、子要素を入れる場所
2:padding = 内側のスペース
3:border = 線を入れる
4:margin = 外側の空白

これら4つは「役割」が決まっている

「4つの領域」役割

次は「4つの領域」それぞれの役割を見ていきましょう。

画像the-box-model-is004

1:content = 文字、画像、子要素を入れる場所
2:padding = 内側のスペース
3:border = 線を入れる
4:margin = 外側の空白

一つずつ説明していきます。

content「文字」「画像」「子要素」を入れる場所

画像the-box-model-is005

contentは「文字」「画像」「子要素」などを入れるためにあります。

この領域はとても大切です。

なぜなら

Webページで表示する「文字」「画像」を入れるところだからです。

逆にいうと、そのほかの「padding」「border」「margin」は、contentに対しての装飾です。

仮に「padding」「border」「margin」が無くてもWebページは表示されます。

なので

contentは、とても大切な領域と言えます。

1:content = 「文字」「画像」を入れる領域
2:padding = contentへの装飾
3:border = contentへの装飾
4:margin = contentへの装飾

さらに

contentは「ボックスモデル」の中へ「ボックスモデル」を入れる時にも使われます。(子要素)

「ボックスモデル」の中へ「ボックスモデル」を入れると、基本的に「親要素contentの左上へ置かれる」ように出来ています。

画像the-box-model-is374

(子要素は「float」「flex-box」「position」などの使用によって、親要素contentの左上へ置かれない場合もあります)

<子要素とは?>

子要素については、以下の記事をご覧ください。

【関連記事】子要素とは?

<親要素、子孫要素(しそんようそ)とは?>

親要素、子孫要素については、以下の記事をご覧ください。

【関連記事】親要素とは?

【関連記事】子孫要素とは?

<階層構造とは?>

階層構造については、以下の記事をご覧ください。

【関連記事】階層構造とは?

contentの例

contentへ文字を入れた時の例です。

出力結果

画像the-box-model-is358

ボックスモデル

画像the-box-model-is332

HTML

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

CSS

h2 {
font-size: 40px;
}

padding「最内側のスペース」バックスクリーンも入れられる

paddingは、contentの周りへ適切な空間を入れるためにあります。

背景色(バックスクリーン)を入れることができます。

画像the-box-model-is006

paddingの例

先ほどの文字へ、paddingを入れた時の例です。(背景色:明るい緑色を入れました)

出力結果

画像the-box-model-is359

ボックスモデル

画像the-box-model-is333

HTML

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

CSS

h2 {
font-size: 40px;

background-color: lawngreen;
padding: 20px;
}

border「線を入れる」

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

線には、さまざまな種類があります。

画像the-box-model-is007

borderの例

先ほどの文字へ、borderを入れた時の例です。(黒い線です)

出力結果

画像the-box-model-is360

ボックスモデル

画像the-box-model-is334

HTML

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

CSS

h2 {
font-size: 40px;

background-color: lawngreen;
padding: 20px;

border: 5px solid black;
}

margin「透明の空白」

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

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

画像the-box-model-is008

marginの例

先ほどの文字へ、marginを入れた時の例です。

出力結果

画像the-box-model-is361

ボックスモデル

画像the-box-model-is009

HTML

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

CSS

h2 {
font-size: 40px;

background-color: lawngreen;
padding: 20px;

border: 5px solid black;

margin: 20px;
}

ボックスモデルとWebページの見本

最後に、ボックスモデルの使用例として「Webページの見本」を用意しました。

ボックスモデルと照らし合わせながら、なんとなく見ていってください。

<Webページの見本>

出力結果

画像the-box-model-is002

ボックスモデル

画像the-box-model-is303

article01p01は「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);
}

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

1:ボックスモデルは「HTML要素の領域」と考えると理解しやすくなる(※1)。
2:領域は、4つある
3:領域は、役割が決まっている

画像the-box-model-is003

(※1)正確には、ボックスモデルは「HTML要素の領域」ではありません。ボックスモデルは、CSSの概念だそうです。ですが、分かりやすくするため「HTML要素の領域」と書いています。

おまけ

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

ほんとに難しいですけど。

ほんとに

以上です。

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

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

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

【広告】
<20代〜30代でのフリーランス、副業を目指すなら オンラインプログラミングスクール「デイトラ」>

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