box-sizingとは?幅、高さ、ボックスモデル関係の重要プロパティ

こんにちは tanaka です。

今回は、
cssプロパティ「box-sizing」の説明です。

「box-sizing」は、
width、heightを「ボックスモデルのどこまでにするか」を決めるプロパティです。

CSSにおいて「重要で」「むずかしい」プロパティでもあります。

この「box-sizing」が分かっていると
あとがラクになります。

頑張って覚えてください。

「box-sizing」の値は、
2種類あります。

 1:「content-box」
 2:「border-box」

この2種類でwidth、heightを「ボックスモデルのどこまでにするか」を決定します。

この「box-sizing」は、
その都度、必要に応じて切り替えるのではなく

「content-box」と決めたら全てのCSSを「content-box」で
「border-box」と決めたら全てのCSSを「border-box」で

全て同じ値を使います。

<(例)全てのCSSを「border-box」にする場合>

* {
margin: 0;
padding: 0;
line-height: 1;
box-sizing: border-box;
list-style-type: none;
}

先頭の「※(アスタリスク)」は、
「全てのHTMLへ有効になるセレクタ」です。

CSSの初期化として一番先頭へ記述します。

「※(アスタリスク)」で決めたものは絶対で固定というわけではなく、
後の記述で上書きして変えることもできます。

特に指定がなかった場合は「※(アスタリスク)」の内容が適用されます。

それでは、
詳しく見て行きましょう。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

box-sizingの説明

box-sizingとは

「box-sizing」とは、
width、heightを「ボックスモデルのどこまでにするか」を決めるプロパティです。

幅、高さは、
この「box-sizing」と「width」「height」によって決まります。

<幅、高さを決定づける「box-sizing」と「width」「height」>

「box-sizing」は、
「ボックスモデルのどこまでにするか」を決めるプロパティ。

「width」「height」は、
具体的な数値を決めるプロパティ。
(50px、300pxなど)

box-sizingの値

「box-sizing」の値は、
2種類あります。

 1:「content-box」
 2:「border-box」

この2種類で「ボックスモデルのどこまでにするか」決定します。

content-box

「content-box」は、
一番内側の「contentだけ」をwidth、heightとして適用させます。

画像blog-css-box-sizing01

それではここへpaddingを入れたらどうなるのでしょうか?

結果はwidth、heightへ加算されます。

<「content-box」へ「padding 50px」を入れたらどうなる?>

box-sizing: content-box;
width: 500px;
height: 300px;

今の状態は、
 「content-box」
 幅  = 500px
 高さ = 300px
です。

ここへ「padding 50px」を入れたらどうなるでしょうか?

結果は
 幅  = 550px
 高さ = 350px
になります。

画像blog-css-box-sizing01

「content-box」は、
contentでwidth、heightは決定しています。

外側が増えれば増えるほど「どんどん加算」されていきます。

HTML、CSSの習いたてのころ
「幅、高さが入れた数値と違う気がする」というのは「box-sizing」のせいだったりもします。

(他にも「プロパティの値へデフォルトの数値が入っている」などもありますけどね)

border-box

「border-box」は、
「content、padding、borderの3つ合わせてwidth、heightとして適用させます。

画像blog-css-box-sizing02

3つ合わせて?
なんだかややこしいですね。

「border-box」は、
content + padding + border = width、height
です。

それでは「border-box」の状態で
padding、borderへ数値を入れたらどうなるのでしょうか?

結果は「contentが縮みます」

画像blog-css-box-sizing02

「padding」「border」の数値が大きくなれば大きくなるほど
一番中心の「content」が外側から押しつぶされるように小さくなっていきます。

「content」は、
外からの圧力に弱いのかもしれませんね。

それではなぜ「border-box」という値があるのでしょうか?

それは計算しやすいからだと思います。

例えば
 幅  = 500px
 高さ = 500px
と決めて

その後
「padding」を何回変更しても
「border」を何回変更しても
幅は500px、高さは500pxと一切変わりません。

(「padding」「border」を変えてもcontentで調節される)

計算しやすいと思いませんか?

だから「border-box」が存在するのだと思われます。

ところでmarginは?

画像blog-css-box-sizing02

marginは「border-box」の外側なので
marginへ数値を入れるとwidth、heightへ加算されます。

<「border-box」はcontentで調節される?>

実は

ボックスモデルのcontentの大きさを直接変えるプロパティはありません。

padding: 50px;
border: 50px;
margin: 50px;

これらは可能ですが

content: 50px;

はできません。

(注意)
contentというプロパティはありますがボックスモデルとは関係ありません。

まとめ

box-sizingとは

「box-sizing」とは、
width、heightを「ボックスモデルのどこまでにするか」を決めるプロパティです。

幅、高さは、
この「box-sizing」と「width」「height」によって決まります。

box-sizingの値は2種類

box-sizingの値は、
content-box、border-boxの
2種類あります。

content-box

画像blog-css-box-sizing01

border-box

画像blog-css-box-sizing02

以上、
box-sizing
の話でした。

ありがとうございました。

タイトルとURLをコピーしました