このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

box-sizing:寸法の計算方法CSS3で追加

記事Oct. 12th,2018
要素の横幅と高さの計算方法を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 box-sizing: content-box;
適用対象 width”プロパティheight”プロパティを適用できるすべての要素
継承 しない
パーセント値 パーセント値は指定できません

box-sizing”プロパティは要素を描画するときの横幅と高さの計算方法を指定します。

box-sizing”プロパティはwidth”プロパティheight”プロパティで指定する寸法がCSSのボックスモデルのどの領域の寸法になるのかを指定します。

サンプルコード

div { box-sizing: border-box;}

説明
content-box 指定された横幅と高さは要素のコンテントボックスの寸法として計算する
border-box 指定された横幅と高さは要素のボーダーボックスの寸法として計算する

CSSのボックスモデル

ブラウザが要素を描画する時にはCSSの“ボックスモデル(box model)”に基づいて描画します。

既定では要素にwidth”プロパティheight”プロパティを適用してその寸法を指定するとき、指定した寸法はコンテンツの領域の大きさとして計算されます。

既定の要素の寸法

ただ、視覚的にはボーダーの領域までが要素の大きさであり、要素をレイアウトするときにもボーダーの領域までの大きさを考慮する必要があります。なので、既定では要素の大きさを考える際にはその都度パディングとボーダーの大きさを計算する必要があります。

box-sizing: border-box;”を適用した場合には既定とは異なり、要素の寸法は最初からボーダーの領域までを含んだ寸法として計算されるのでレイアウトのする時にパディングとボーダーの大きさを考慮する必要がありません。

box-sizing: border-box;

仕様書

Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC)
box-sizing
定義なし

定義なし

定義あり

移動
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC)
content-box
定義なし

定義なし

定義あり

移動
border-box
定義なし

定義なし

定義あり

移動
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC)
box-sizing
定義なし

定義なし

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC)
content-box
定義なし

定義なし

定義あり
border-box
定義なし

定義なし

定義あり

使用例

コンテントボックスの寸法として計算する

div {
box-sizing: content-box;
width: 100px;
height: 100px;
border: 20px solid rgb(0,0,0);
padding: 20px;
margin: 20px;
}
box-sizing: content-box;

ボーダーボックスの寸法として計算する

div {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid rgb(0,0,0);
padding: 20px;
margin: 20px;
}
box-sizing: border-box;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク