シリーズ記事「初心者もできる！プログラミング基礎講座」の第15回は、CSSのボックスモデルについてです。CSSを理解する上で重要な概念であり、レイアウトを組む時に必要となる知識です。この概念は奥が深いですが、まずは基本的なことをこの記事で解説します。
CSSのボックスモデルとは？
HTMLで書いた各要素（コンテンツ）を中心に、余白や境界線を視覚的に明示したブロック図のことです。百聞は一見に如かず ですから、以下の図で確認してみましょう。
内側にある青色のボックス（画像では「auto ｘ auto」の部分）を中心に、外側に向けて3つのボックスが囲んでいます。これらのボックスの名称は以下の通りです。
※内側から順に
- コンテントボックス
- パディングボックス
- ボーダーボックス
- マージンボックス
それぞれは、CSSのプロパティとして値を設定できます。そうすることでレイアウトを組んでいくことができます。それぞれにどんな意味があるのか、かんたん解説していきます。
説明するのに、以下のHTMLファイルを準備しました。これにスタイルをあてながらボックスモデルの基礎を理解していきましょう。前回までで解説したGoogle Chromeの「開発者ツール」で視覚的に確認できます。
HTML：
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>プログラミング講座</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body style="margin: 0;">
<div class="top">上のボックス</div>
<div class="main">メインボックス</div>
<div class="bottom">下のボックス</div>
</body>
</html>
簡易的ですが、body内に3つのdiv要素を書いています。おもに「メインボックス」(class名：main)にスタイルをあてながら上下との関連で理解を深めていきましょう。
説明していく上でデフォルトのmarginが邪魔をするため、body全体にインラインで margin: 0; のstyleをあてています。
コンテントボックス
その名の通り、コンテンツ（各要素）が含まれるボックスで、幅（width）と高さ（height）をプロパティで設定します。
実際にCSSを記述していきましょう。ブラウザのデフォルトで幅は画面幅いっぱいに、高さは24pxに設定されていました。そのため「メインボックス」に対して幅と高さを指定します。
CSS：
.top {
background-color: blueviolet;
}
.main {
background-color: cyan;
width: 500px;
height: 100px;
}
.bottom {
background-color: blueviolet;
}3つのdiv要素それぞれに対して背景色が指定されています。加えて、「メインボックス」（class名：main）に対して、幅（width）500xと高さ（height）100pxを指定しています。
ブラウザで表示してみると、画像の上部のようになると思います。メインボックス辺りで右クリックして「検証」を選択すると「開発者ツール」で確認ができます。画像右下のCSSの部分で幅と高さが指定されていることを確認できます。
ボックスモデルを確認する場合は、赤色で囲った部分にある「Computed」タブを選択してください。
右下の部分にボックスモデルが表示されます。赤く囲った部分がコンテントボックスで、CSSで指定した幅と高さ「500 × 100」となっているのを確認できます。
このボックスモデル内のコンテントボックスのところにマウスをホバーさせると、ブラウザで表示されたどの部分が該当しているのか、少し色を変えて明示してくれます。この色は、ボックスモデルの各ボックスの色に対応しています。つまり、コンテントボックスなら水色です。表示を確認してみてください。
これがコンテントボックスで、基本的に幅と高さを指定します。次は、パディングボックスについてです。
パディングボックス
これは、第6回でも少し解説しましたが、コンテントボックスとボーダーボックスの間にある余白として考えることができます。イメージとしては、各要素には見えているかにかかわらず境界線（ボーダー）がついていて、その内側の余白がパディングで、外側の余白が後述するマージンになります。
CSS：
.main {
background-color: cyan;
width: 500px;
height: 100px;
padding: 10px 20px 30px 40px;
}
上のコードのようにパディングを指定しました。第6回のおさらいになりますが、
padding: 10px 20px 30px 40px;
と書いた場合、要素の上、右、下、左（時計回り）でパディングが指定されます。
開発者ツールで確認すると、右下のボックスモデルのパディングボックス内に、視覚的な位置を明示して数字が入っているのを確認できます。このパディングボックスにマウスをホバーさせると、対応するブラウザ上の表示を画面上部で確認できます。
赤く囲った部分が対応しています。「メインボックス」の上下左右に指定されたpx分の余白がついているのを確認できます。
ボーダーボックス
これは、先程も解説したとおり要素の境界にひかれた線です。ただし、これもボックスとしてとらえて考えます。
CSS：
.main {
background-color: cyan;
width: 500px;
height: 100px;
padding: 10px 20px 30px 40px;
border: 10px solid gray;
}
分かりやすくするために、上のようにボーダーを記述しました。
border: 10px solid gray;
このように記述すると、10pxの実線を灰色で引く という指定になります。線の太さ、線の種類、線の色といった具合です。
開発者ツールで確認すると、上の画像のようになります。ボックスモデルを見ると、「ボーダーボックス」内の上下左右に10pxがとられていることが分かります。ブラウザでも、10pxの実線で灰色のボーダーがひかれたことを確認できますね。
最後は、マージンボックスです。
マージンボックス
パディングの時に開設した通りですが、これはボーダーの外側の余白です、隣接する要素との間隔としてとらえると分かりやすいかもしれません。
CSS：
.main {
background-color: cyan;
width: 500px;
height: 100px;
padding: 10px 20px 30px 40px;
border: 10px solid gray;
margin: 20px 40px;
}
上のように記述しました。
margin: 20px 40px;
この場合、マージンは上下が20px、左右に40pxつけるという指定です。
開発者ツールで確認すると、画像の通りです。メインボックスの周り（外側）に上下20px、左右40pxの余白がついています。上下の要素の間に指定した間隔があいたことが分かると思います。
マージン相殺の概念
これは覚えておきたい概念です。簡単に言えば、要素間のマージンが重なる場合、大きい値が優先されるということです。例で考えてみましょう。
margin: 10px 20px 30px 40px;
上のような記述は、ショートハンドと呼ばれる短縮した書き方です。実際には、
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
と記述したのと同じです。
CSS：
.main {
background-color: cyan;
width: 500px;
height: 100px;
padding: 10px 20px 30px 40px;
border: 10px solid gray;
margin-bottom: 20px;
}
.bottom {
background-color: blueviolet;
margin-top: 30px;
}
上のようにCSSを記述したとしましょう。「メインボックス」(.main)に対してmargin-bottomが20px、そのすぐ下にある要素である「下のボックス」(.bottom)に対してmargin-topが30pxで指定されています。この場合、両者のマージンが重なり合います。単純に足し算（20px + 30px）で50px分の余白がつくように思えるかもしれません。
しかし、前述の通り要素間のマージンが重なる場合、大きい値が優先されます。つまり、この場合は重なり合うマージンの大きい値（「下のボックス」に指定した30px）が優先され、「メインボックス」で指定した20pxは相殺されます。
上の画像のように、「メインボックス」と「下のボックス」の間には30px分の余白しかないのが分かります。「メインボックス」に対して指定したmargin-bottom: 20px; は相殺されています。大きいほうの値である30pxによって打ち消されているというわけです。
時々、マージンを指定しているのに思ったように余白が取れない時は、このマージン相殺の概念を思い出すと原因が究明できるかもしれませんね。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第15回】はいかがでしたか。今回は、CSSのボックスモデルの基礎的な情報を解説しました。
- コンテントボックス
- パディングボックス
- ボーダーボックス
- マージンボックス
で示されるボックスモデルの概念を意識していると、CSSでのレイアウトが容易になりますね。マージン相殺についても覚えておきましょう。
次回は、ボックスモデルのもう少し深いところまで解説します。次回もお楽しみに！