ボックスモデルとは？構成要素や計算方法を学んでみよう。

- プログラミング
ボックスモデルとは？構成要素や計算方法を学んでみよう。
2021年4月21日

「ボックスモデル」理解しよう

初心者の段階においても、HTML/CSSに慣れていくなかで「この見出しの下にもうちょっとスペースを空けたい」「<p>タグ間の距離を調整したい」など、要望が出てくると思います。

今回はその際に必要な概念であり手法である「ボックスモデル」の基礎的な概念について解説していきます。

ボックスモデルとは？

私たちが普段見ているWEBページのコンテンツ。文字だったり写真だったりは全て「四角形の中に収まる」かたちで存在しています。丸形に見えるコンテンツでも、目には見えない四角形のなかに収まっているのです。

当然その四角形には高さや幅があり、その形状から「四角＝ボックス」と呼ばれ、この概念を「ボックスモデル」と言います。

WBEサイトを作る場合には、必ずこのボックスモデルの概念を理解する必要があります。では、ボックスモデルとは具体的にどのような要素で成り立っているのかを見ていきましょう。

ボックスモデルの構成要素

「ボックスモデル」の構成要素。

これがわかれば自在に四角形を組んで、そのなかにコンテンツを入れることができますよね。

以下の図を見てみましょう。

▶ボックスモデルの構成要素「4つの領域」の図

ボックスモデルを構成する要素は「4つ」。

これら「4つの領域」は「content / padding / border / margin」という名称で存在します。

それぞれを解説していきます。

① content【コンテンツ】

真ん中にある、テキストや画像、動画が表示される中心エリアです。「幅（width）」「高さ（height）」が指定できます。

② padding：パディング【内余白】

コンテンツ領域とボーダーの間にある「内側の余白」です。設定が「0」であれば見た目には存在しないように見えます。このpaddingは背景色をつけることが可能です。

③ border【境界線】

パディングの外側にある領域。この値が高くなれば線は太くなり「0」であれば見た目には存在しません。初期設定では「0」になっているので注意しましょう。CSSでborder設定を行うと存在を確認できます。

borderはあくまで「線」であり余白ではないことに注意。そのため、paddingやmarginのように余白指定をせず「border-width」など「線の形式」で指定します。

④ margin【外余白】

ボックスの最も外側にある領域です。borderの外側にもさらにボックスが存在しているんですね。なおmarginには背景色をつけることはできません、常に透明というのがmarginの特長です。

ボックス作成には「3つのプロパティ」を使う

ボックスの設定に使う要素はcontentを抜いた以下の3つです。

●padding

●border

●margin

これらのプロパティの内側にcontentが存在するということですね。

実際にボックスを書いてみよう

では、テキストエディタで実際にボックスモデルを書いてみて、ブラウザで確認してみましょう。

テキストエディタの使い方がわからない方や忘れてしまった場合は『【初心者向け実践】HTMLとCSSの環境構築「8つの手順」』の記事で一度練習してから臨んでください。

▶今回のゴール

今回は見出し（h1）に「padding/border/margin」の3つを反映させてみます。

ソースコードは、コピペで不要なスペースが発生したら削除しましょう。またインデントは各自でお願いします。

▶STEP①

下のHTMLコードをコピーしてブラウザで確認します。（※コピペで不要なスペースが発生したら削除しましょう。またインデントは各自でお願いします）
```
<!DOCTYPE html>
<html>
<head>
  <title>ボックスの練習</title>
  <link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
  <h1 class="box-sample">ボックスモデルを覚えよう</h1>
</body>
</html>
```
上の画像のように、単にh1（見出し）が反映されたかたちですね。boderなども初期設定では「0」なので見えません。

▶STEP②

まずはわかりやすい「border」を目に見えるかたちで反映させてみましょう。下のCSSコードをCSSファイルに貼り付け、ブラウザで確認してみます。（※コピペで不要なスペースが発生したら削除しましょう。またインデントは各自でお願いします）
```
h1 {
  border: 2px solid #ff0000;
}
```
上記のコードは「ボーダー線が2pxの太さ」「形はsolid」「色は#ffoooo（赤色）」を示しています。

ブラウザには下のように反映されます。

▶STEP③

次は「内余白」である「padding」を「60px」の幅で追記してみましょう。下のCSSコードをCSSファイルに貼り付け、ブラウザで確認してみます。
```
h1 {
  border: 2px solid #ff0000;
  padding: 60px;
}
```
下の画像のように、赤線borderの内側の余白において、上下左右に余裕が出ましたね。これがpaddingの効果です。

▶STEP④

それでは最後に「内外余白」である「margin」を「80px」の幅で追記してみましょう。下のCSSコードをCSSファイルに貼
```
h1 {
 border: 2px solid #ff0000;
 padding: 60px;
 margin: 80px;
}
```
すると、下の画像のようになります。

外枠にも随分と余裕が出ましたね。marginが反映されました。

余白と境界線の指定方法

今回はシンプルに「padding / border / margin」の調整を行いました。

しかしここで「四辺全てを調整するのでなく、上下左右で調整を変更したいな」となるかもしれません。もちろんこれも同じ流れの記述で反映が可能です。

paddingとmarginは、値を複数書くことで上下左右を個別に指定できます。また、ボーダーは先ほどの演習どおり「borderプロパティ」で太さや形、色を指定可能。

下の見本の記述をご覧ください。余白と境界線の書き方を見て、CSSに追記し、ブラウザでの変化を見てみましょう。

▶余白と境界線のCSSの見本

<paddingの場合の例>（marginでも同じ）

① padding: 10px;
→四辺が10px

② padding: 10px 20px;
→上下が10px・左右が20px

③ padding: 10px 20px 30px;
→上が10px・左右が20px・下が30px

④ padding: 10px 20px 30px 40px;
→上が10px・右が20px・下が30px・左が40px（時計回り）

⑤ padding: 10px 20px;
→上下が10px・左右が20px

※一辺にだけ余白や境界線をつけたい場合はプロパティに「margin-right」「border-bottom」のように辺（top/bottom/right/left）をつけます。

<borderの場合の例>

① border: 2px solid #ff000
→太さ2px・形solid・色#222
「box-sizing」という手法

最後に「box-sizing」というCSS規格「CSS3」から追加されたプロパティのお話をします。

「box-sizing」とは、これにより「要素の幅（width）高さ（height）の中にpaddingとborderを含めるかどうか」を決めることができる便利な手法のこと。

画像と共に解説していきます。

下の図は<p>タグに対して「width」「padding」「border」を指定した状態を表しています。

もし、ボックス全体の幅を「300px」にしたい場合。

そのままCSSに「width:300px」と書くと、下の画像の上段「A」のように「300px＋左右のpadding＋border」の値がボックス全体の値になってしまいます。

この見た目では「300px」ではないですよね。だいぶはみ出ています。

そこで、解決法として「CSSのbox-sizing」プロパティを使って見た目を「300px」にすることができます。下の画像をご覧ください。

下段の「B」は下記の記述にしています。

●「box-sizing:border-box」を<p>タグに適用。

●見た目のボックスの幅＝「300px（300pxの中にpaddingもborderも含む）」になる

これはレスポンシブのサイトを作る際に役立つ概念です。「paddingもborderも幅と高さに含める」ことができるんですね。
比較として、下の画像も掲載しておきます。上段の「A」はborderでなく「content」に幅を合わせた指定。これは初期値と同じ意味になります。

●「box-sizing:content-box」を<p>タグに適用

●見た目のボックスの幅＝「300px＋padding＋border」になる

最後は「box-sizing」のお話でしたが、この内容さえもスタイルシートのなかでは基礎になります。

しかし慣れてくると、日常的にボックスモデルの計算もできるようになってきます。

では、実際のコードで比較してみましょう。

「box-sizing」をコードで比較

「box-sizing:content-box」と「box-sizing:border-box」を比較してみましょう。

「box-sizing」の記述以外は、全ての値が同じ条件であるコードの比較です。

まずはHTMLコードをテキストエディタに貼り付けましょう。
```
<html>
  <head>
    <meta charset="utf-8">
    <title>box-sizingの練習</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <div class="content-box">content box</div>
    <br>
    <div class="border-box">border box</div>
  </body>
</html>
```
そして、CSSコードもコピーします。
```
div {
  width: 200px;
  height: 100px;
  padding: 30px;
  border: 10px solid red;
  background: greenyellow;
}
.content-box {
  box-sizing: content-box;
}
.border-box {
  box-sizing: border-box;
}
```
ブラウザには、下の画像のように反映されます。

下記に、それぞれのbox-sizingの計算式を記載しておきます。

なぜこのようになるかが見えてくると思います。

<content-boxの計算式>
●全体の幅：200px + (2 × 30px) + (2 × 10px) = 280px

●全体の高さ：100px + (2 × 30px) + (2 × 10px) = 180px

●コンテンツ領域の幅：200px

●コンテンツ領域の高さ：100px

<border-boxの計算式>

●全体の幅：200px

●全体の高さ：100px

●コンテンツ領域の幅：200px – (2 × 30px) – (2 × 10px) = 120px

●コンテンツ領域の高さ：100px – (2 × 30px) – (2 × 10px) = 20px

上記の計算式やbox-sizingの概念あたりで「わからない」となってくる人も多いです。しかし今はわからないで問題ないですし、これは頭で計算をひたすらする作業ではなく「実際に手を動かして慣れる」のが正解のお話。

つまり、サンプルコード内の数値を自分で変えてみて「こうするとはみ出るんだ」「こうするろ収まるんだ」と、どのような変化がブラウザにもたらされるのかを反復すると意味が見えてきます。

できれば基礎段階だからこそ自己流・独学での理解は避け、頼れる先輩やメンターに指導をしてもらうのが安全であり、間違ったクセがつかない方法です。

メンターを「自分用にレンタル」するという学び方

今回はブロックレベル性質における「ボックスモデル」の概念や仕組みを解説しました。そしてややハードル高めのbox-sizingのお話もあえて最後に付加しています。

今回のお話は、1回でスラスラと理解できるものではないですし、手を動かしてこそわかるものなので、活字レベルで把握できなくても落ち込む必要はありません。

どのお話もマークアップ言語（HTML）やスタイルシート言語（CSS）を扱うなかでは必ず反復するものばかり。頭でなく手を動かして覚えていきましょう。基礎段階でもさまざまな壁が立ちはだかるプログラミングの道ですが、基礎をどれだけ理解しているかで応用段階での飛躍が当然決まってきます。粛々とゆっくり積み重ねていきましょう。

当サイト「メンタレ」は、メンターを一時的にレンタルできるサービス。

独学の途中や挫折したところからなど、さまざま場面からのスタートをメンターが「講座」というかたちでサポートします。

単なる質問チャットや動画教材とはちがい、自分の弱みを系統立てて修復できるのが特長です。

独学の方、駆け出しエンジニアの方、完全な初心者の方も。「わからないときにちゃんと実践的な講座を受ける」ことで、曖昧な箇所をなくしておきましょう。

いつでもお気軽にご活用ください。