シリーズ第16回は、ボックスサイジングです。これはレイアウトを考える時に非常に重要な考え方で、多くのプロジェクトで採用されてます。直感的なレイアウトを可能にするCSSプロパティの一つbox-sizingについてかんたん解説していきます。
ボックスサイズが指定より大きい？
前回（シリーズ第15回）ボックスモデルについて解説した際、コンテントボックスのサイズをwidth(幅)とheight(高さ)で指定するという点をお伝えしました。
シリーズ記事「初心者もできる！プログラミング基礎講座」の第15回は、CSSのボックスモデルについてです。CSSを理解する上で重要な概念であり、レイアウトを組む時に必要となる知識です。この概念は奥が深いですが、まずは基本的なことをこの記事で解[…]
その時に用いたファイルでは、CSSでwidthを500px、heightを100pxで指定しました。しかし、開発者ツールで実際のサイズを確認すると、それより大きくなっているのが分かります。
画像右下の緑囲み部分を見ると、CSSでの指定を確認できます。しかし、左上の赤囲み部分を見ると分かる通り、実際のサイズが指定より大きくなっています。
CSSでの指定
width: 500px
height: 100px
ブラウザ上の表示
width: 580px
height: 160px
このように、ボックスサイズが指定したサイズより大きくなるのはどうしてでしょうか。
大きくなる理由
コンテントボックスでの指定にpaddingとborderの数字が足されているからです。実際に開発者ツールでボックスモデルを確認してみます。CSS情報の「Computed」タグです。
コンテントボックス（中央にある青色のボックス）内の数字は、指定通り「500 × 100」になっています。しかし、実際のボックスサイズはpaddingとborderの数字が足されて表示されていることが分かると思います。
width(幅)：
500 + 10 + 40 + 20 + 10 = 580（緑囲み数字を足し算）
height(高さ)：
100 + 10 + 10 + 30 + 10 = 160（赤囲み数字の足し算）
これは直感的ではないと感じる方が多いでしょう。そのため、widthとheightで指定した数字がそのままボックスサイズになるようするためのプロパティが用意されています。そして、多くのプロジェクトでこのプロパティが用いられています。ボックスサイジングです。
box-sizing（ボックスサイジング）
これは、要素の全体の幅と高さをどのように計算するかを設定するためのCSSのプロパティです。
box-sizing: border-box;
box-sizingというプロパティに border-box という値を入れます。こうすることで、全体のボックスサイズがコンテントボックスのwidthとheightで指定した通りのサイズになるよう自動調整されます。
前回使ったHTMLとCSSファイルで試してみます。
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>CSS：
.top {
background-color: blueviolet;
}
.main {
background-color: cyan;
width: 500px;
height: 100px;
padding: 10px 20px 30px 40px;
border: 10px solid gray;
margin-bottom: 20px;
box-sizing: border-box;
}
.bottom {
background-color: blueviolet;
margin-top: 30px;
}CSSファイルの12行目です。対応するボックス（.main）に box-sizing: border-box; を指定しています。開発者ツールで確認してみましょう。
左上の赤囲み部分を見ると分かる通り、widthとheightで指定した通り「500 × 100」になっているのを確認できます。ボックスモデルでも確認してみます。
どのように自動調整されたかを理解できます。赤囲み部分のコンテントボックス内の数字に注目してください。「420 × 40」になっています。
widthもheightもそれぞれのpaddingとborderの数字が差し引かれて、ボックス全体で指定した通りの値になるようにコンテントボックス内の数字が自動調整されました。
実際にブラウザ上で対応するボックスの大きさを確認すると、box-sizingプロパティを設定した後のほうが小さくなっていることも分かります。つまり「500 × 100」→「420 × 40」へのサイズダウンです。
このほうが直感的にサイジングできて分かりやすいですね。実際MDNのリファレンスを確認していくと、次のように書かれていました。
要素をレイアウトする際には、 box-sizing を border-box に設定しておくと便利です。これにより、要素の寸法の扱いが非常に簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。
ボックスサイジングを全体で指定する
一つ一つのボックスに対して毎回box-sizingプロパティを記述するのは面倒です。それで、全体で指定する方法がよくとられています。
MDNリファレンスで「ボックスモデル」を確認すると、「CSSボックスモデルの代替」という見出しがあり、次のように書かれています。
すべての要素で代替ボックスモデルを使用することを望み、かつこれが開発者の間で一般的な選択である場合、以下のスニペットで見られるように、<html> 要素で box-sizing プロパティを設定して、他のすべての要素でその値を継承するように設定してください。
指定方法は上の画像のように提案されています。html全体にCSSで、box-sizing: border-box; を指定しています。加えて、*（ユニバーサルセレクタ：すべての要素を指定）や疑似要素に対して、box-sizing: inherit; を指定し、box-sizing: border-box; を継承するように記述しています。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第16回】はいかがでしたか。今回は、ボックスサイジングについて解説しました。
直感的にボックスを配置してレイアウトするために大切な考え方です。多くのプロジェクトで実際に用いられているプロパティですから、しっかり覚えておきたいですね。
次回は、ブロックボックスとインラインボックスについて解説します。次回もお楽しみに！