box

HTMLやCSSを使い始めた最初のころ、paddingやborderを設定するとボックスが指定したwidthやheightを超えて反映されて苦労しました。

ただ、今ならbox-sizingというプロパティを知っているので、ボックスモデルをわりと感覚的に扱えるようになりました。

今回はそのbox-sizingプロパティの紹介です。

ボックスを感覚的に扱うとは？

「ボックスを感覚的に扱う」といってもいまいちピンと来ない方もいるかもしれないので、少し説明します。

divなどのブロック要素に対してCSSで設定したボックスは、paddingやborderの具合によって本来のwidthやheightを超えてしまいます。

box-sizingを使わない例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			margin-bottom: 10px;
		}
		.box1 {
			width: 100px;
			height: 100px;
			background-color: red;
			border: 10px solid blue;
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: red;
			padding: 10px;
		}
		.box3 {
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="box1">
		<h1>BOX1</h1>
	</div>
	<div class="box2">
		<h1>BOX2</h1>
	</div>
	<div class="box3">
		<h1>BOX3</h1>
	</div>
</body>
</html>

これは、100×100pxのボックスにborderとpaddingを10pxずつ適用してみた例です。

本来の大きさである100×100pxを、付加したborderとpaddingのぶん超えていることがわかります。

これだと、後からborderやpaddingを付け足した時に全体のデザインに支障がでてきます。

これを、ボックスの大きさが100×100pxのまま扱えるようになると便利ですよね？

それを可能にするのがCSS3のbox-sizingプロパティです。

box-sizingの使用方法

box-sizingの値をborder-sizingとするだけです。

実際に使用してみると、ボックスの大きさがすべて100×100pxになっていることがわかりますね。

box-sizingを使う例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			margin-bottom: 10px;
		}
		.box1 {
			width: 100px;
			height: 100px;
			background-color: red;
			border: 10px solid blue;
			box-sizing: border-box;
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: red;
			padding: 10px;
			box-sizing: border-box;
		}
		.box3 {
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="box1">
		<h1>BOX1</h1>
	</div>
	<div class="box2">
		<h1>BOX2</h1>

	</div>
	<div class="box3">
		<h1>BOX3</h1>
	</div>
</body>
</html></pre> 

これで、ボックスモデルが感覚的に扱えるようになりました！やったね


Sublime Textを使っている方への補足


ちなみに、Sublime Textを使っている方はbox-sizingの部分の色が変わりません。

色は変わってなくても、ちゃんと適用されているので大丈夫です。

sublimetextでbox-sizingを見た時の図

以上、補足でした。