Title

box-sizingとは

box-sizing とは次の語句からなるCSSのプロパティです。

box

読み: ボックス
意味: 箱

sizing

読み: サイジング
意味: 寸法、大きさ

目次に戻る

box-sizingプロパティの概要

このプロパティは要素の幅と高さの計算方法を設定することができます。

ブラウザのレンダリングエンジンではページを表示する際に、全ての要素に次の四つの境界に基づいたボックスを構成します。

• margin edge: 外側の余白の境界 (margin height × margin width)
• border edge: 境界線の境界 (border height × border width)
• padding edge: 内側の余白の境界 (padding height × padding width)
• content edge: コンテンツの境界 (content height × content width)

box-sizingプロパティは、widthプロパティとheightプロパティの設定値を、どのボックスを基準に計算するのかを指定することができます。 このプロパティには二つのキーワード値があり、content-box か border-boxのどちらかを選択します。

単純に表現すると、content-boxを選ぶと要素の内側を基準に計算することになり、border-boxを選ぶと要素の外側を基準に計算するということになります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{box-sizing: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

初期値: content-box

content-box値は、初期値であり既定値です。

このキーワード値を選択すると width と height は、コンテンツボックスの領域を基準に計算されます。 ここでいうコンテンツボックスとは、下記のサンプルのオレンジ色で示した範囲になります。

オレンジ色の部分が親要素の50%の幅であり、5文字分の高さになっています。

このサンプルの高さの計算は、次のようになります。
文字の高さは、0.8cm × 5em = 4cm
つまり、コンテンツボックスの高さが 4cm なので、コンテンツボックスに5行の文字がピッタリ収まります。

外側の余白、境界線、内側の余白は計算の対象外の領域になります。

 div{
	border-width: 0.8cm;
	padding: 0.8cm;
	font-size: 0.8cm;
	box-sizing: content-box;
	width: 50%;
	height: 5em;
}

目次に戻る

キーワード値: border-box

このキーワード値を選択すると width と height は、ボーダーボックスの領域を基準に計算されます。外側の余白は含まれません。 ここでいうボーダーボックスとは、下記のサンプルのオレンジ色で示した範囲になります。

オレンジ色の部分が親要素の50%の幅であり、5文字分の高さになっています。

高さの計算は、次のようになります。
文字の高さは、0.8cm × 5em = 4cm
つまり、ボーダーボックス領域の高さが 4cm になり、コンテンツが、コンテンツボックスに入りきらないということになります。

div{
	border-width: 0.8cm;
	padding: 0.8cm;
	font-size: 0.8cm;
	box-sizing: border-box;
	width: 50%;
	height: 5em;
}

目次に戻る

グローバル値

box-sizingプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のcontent-boxに戻します。
• unsetは継承の初期値に戻します。
  このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{box-sizing: グローバル値;}

目次に戻る

補足説明

• width および height を受け付ける全ての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

要素の幅と高さは、以下の設定で固定しています。
width: 50%;
height: 5em;

box-sizing: content-box;

box-sizing: border-box;

目次に戻る