box-sizingとは?幅、高さに関係する重要プロパティ(html,css)

画像box132

こんにちは tanaka です。

今回は「box-sizing」の説明です。

「box-sizing」は、「学び始め3難」の1つです。

「学び始め3難」とは、以下の3つです。

1:ボックスモデル
2:「box-sizing」
3:widthとheight

この「box-sizing」は、そこそこ難しいので
ここは頑張っていきましょう。

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

「決めれるボックスモデル」は、以下の2つです。

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

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

<width、heightとは?>

width、heightとは、幅、高さを決めるプロパティです。

幅 = width
高さ = height

width、heightは、「数値」「パーセント」「auto」などの指定ができます。

幅を300pxにしたい場合は、

width: 300px;

高さを500pxにしたい場合は、

height: 500px;

このように使います。

しかし

必ずしもwidth、heightへ入れた数値が「幅」「高さ」になるわけではありません。

実際の「幅」「高さ」は、以下の3つが関わり合い決定します。

1:ボックスモデル
2:「box-sizing」
3:widthとheight

3つともなかなか難しいので頑張っていきましょう。

文字化けします

<コピー、ペーストすると文字化けします>

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

「box-sizing」とは?

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

「?」

何だか難しく聞こえます。

しかし

実は、ボックスモデルが分かれば、さほど難しくはありません。

ボックスモデルが「いまいちよくわからないなー」と感じたら

この記事を読む前に「下の記事」をご覧ください。

ボックスモデルとは?ゆっくりと分かりやすく説明(html,css)

「box-sizing」2つの値

「box-sizing」には、2つの値があります。

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

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

<content-box>

画像blog-css-box-sizing01

<border-box>

画像blog-css-box-sizing02

「box-sizing」具体例

「box-sizing」の具体例を挙げます。

「box-sizing」は、画像を見ながらの方がよく分かると思います。

そこで

「box-sizing」の画像を2つ用意しました。

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

画像を交えて詳しく説明します。

<box-sizing: content-box>

「box-sizing: content-box」指定の例です。

width = 300px
height = 100px

「content-box」は、
「content」だけがwidth、heightになります。

画像box109
width: 300px;
height: 300px;

box-sizing: content-box;

<box-sizing: border-box>

「box-sizing: border-box」指定の例です。

width = 500px
height = 300px

「border-box」は、
「content」「padding」「border」3つ合わせてwidth、heightになります。

画像box110
width: 300px;
height: 300px;

box-sizing: border-box;

「box-sizing」なぜ難しい?

「box-sizing」仕組みの説明は、上の2つで終わりです。

「2つなら、これって簡単では?」

そう思いました?

実は、ここから難しくなります。

「box-sizing」には「3つの問題」が隠れています。

1:外側の問題
2:内側の問題
3:width、heightのauto問題

詳しく説明します。

1:外側の問題

外側の問題とは、「box-sizing」で指定した外側はどうなるかの問題です。

詳しく説明します。

「box-sizing」の「content-box」は、このような感じでした。

画像blog-css-box-sizing01

ここへ「content」の外側である
「padding」「border」「margin」へ数値を入れたら?

どうなるのでしょうか?

具体的にいうと

「width」はここ

画像box116

「height」はここ

画像box117

そして

「box-sizing」の「border-box」も外側に「margin」があります。

「border-box」は、このような感じでした。

画像blog-css-box-sizing02

「border-box」の外側である
「margin」へ数値を入れたら?

どうなるのでしょうか?

具体的にいうと

「width」はここ

画像box122

「height」はここ

画像box124

という「外側の問題」です。

結果は、

数値を入れた分、「どんどん加算されて」いきます。

外側の問題(content-box編)

それでは、実際に増えていく様子を見ていきましょう。

まずは「content-box」から見ていきましょう。

<content-boxに「padding」「border」「margin」を入れてみた:width>

まずは「content-box」から説明します。

「content-box」は、下のような感じです。

画像blog-css-box-sizing01

この「content-box」へ
「padding」「border」「margin」の数値を入れるとどうなるか?

まずは、幅である「width」でみていきましょう。

「content-box」は、「contentだけ」「width」です。

画像blog-decide-the-width12

例えば「width = 500px」だったとします。

するとこうなります。

画像box112

そこで

padding = 0
border = 0
margin = 0

数値が「0」だとします。

とすると

「padding」「border」「margin」は無いので、
下のようになります。

画像blog-decide-the-width03

ここまでの説明は大丈夫ですか?

「OK」ですね。

それでは、話を進めます。

そこへ「paddingを10px」入れます。

すると下のようになります。

画像blog-decide-the-width04

width = 500px
padding = 10px + 10px(左 + 右)

幅 = 520px

「なんということでしょう」

設定した「width=500px」より大きくなってしまいました。

そして

さらに「border」を入れるとどうなるでしょうか?

「borderを10px」入れます。

すると下のようになります。

画像blog-decide-the-width05

width = 500px
padding = 10px + 10px(左 + 右)
border = 10px + 10px(左 + 右)

幅 = 540px

「なんということでしょう」

設定した「width=500px」より大きくなってしまいました。

そして

さらに「margin」を入れると、どうなるでしょうか?

「marginを10px」入れます。

すると下のようになります。

画像blog-decide-the-width06

width = 500px
padding = 10px + 10px(左 + 右)
border = 10px + 10px(左 + 右)
margin = 10px + 10px(左 + 右)

幅 = 560px

「なんということで・・・」

どんどん設定した「width=500px」より大きくなっています。

このことから分かるように

外側へ数値を入れた分、幅は「どんどん加算されて」増えていきます。

<content-boxに「padding」「border」「margin」を入れてみた:height>

先ほどは「width」を見てきました。

そして

「height」でも全く同じことが起こります。

見ていきましょう。

次は、高さである「height」です。

「content-box」は、「contentだけ」「height」です。

画像blog-decide-the-height02

例えば「height = 100px」だったとします。

すると下のようになります。

画像blog-decide-the-height01

そこで

padding = 0
border = 0
margin = 0

数値が「0」だとします。

とすると

「padding」「border」「margin」は無いので、
下のようになります。

画像blog-decide-the-height04

そこへ「paddingを10px」入れます。

すると下のようになります。

画像blog-decide-the-height05

height = 100px
padding = 10px + 10px(上 + 下)

高さ = 120px

設定した高さ「height=100px」より大きくなってしまいました。

そして

さらに「border」を入れるとどうなるでしょうか?

「borderを10px」入れます。

すると下のようになります。

画像blog-decide-the-height06

height = 100px
padding = 10px + 10px(上 + 下)
border = 10px + 10px(上 + 下)

高さ = 140px

設定した高さ「height=100px」より大きくなってしまいました。

そして

さらに「margin」を入れるとどうなるでしょうか?

「marginを10px」入れます。

すると下のようになります。

画像blog-decide-the-height07

height = 100px
padding = 10px + 10px(上 + 下)
border = 10px + 10px(上 + 下)
margin = 10px + 10px(上 + 下)

高さ = 160px

どんどん設定した「height=100px」より大きくなっています。

このことから分かるように

外側へ数値を入れた分、高さは「どんどん加算されて」増えていきます。

外側の問題(border-box編)

次は、「border-box」を見ていきましょう。

「border-box」の外側には「margin」があります。

どうなるでしょうか?

見ていきましょう。

<border-boxに「margin」を入れてみた:width>

それでは「border-box」へ「margin」の数値を入れるとどうなるか?

見ていきましょう。

まずは、widthです。

「border-box」は、
「content」「padding」「border」3つ合わせてwidthになります。

画像blog-decide-the-width13

例えば「width = 500px」だったとします。

すると

下のようになります。

画像blog-width-auto-difference24

そこで

margin = 0

数値が「0」だとします。

とすると

「margin」は無いので、下のようになります。

画像blog-decide-the-width09

そこへ「marginを10px」入れます。

すると下のようになります。

画像blog-decide-the-width08

width = 500px
margin= 10px + 10px(左 + 右)

幅 = 520px

こちらも同様に

設定した幅「width=500px」より大きくなってしまいました。

このことから分かるように

外側へ数値を入れた分、幅は「どんどん加算されて」増えていきます。

<border-boxに「margin」を入れてみた:height>

次は、「border-box」の「height」です。

「border-box」は、
「content」「padding」「border」3つ合わせてheightになります。

画像blog-decide-the-height03

例えば「height = 300px」だったとします。

すると

下のようになります。

画像box111

そこで

margin = 0

数値が「0」だとします。

とすると

「margin」は無いので、下のようになります。

画像blog-decide-the-height08

そこへ「marginを10px」入れます。

すると下のようになります。

画像blog-decide-the-height09

height = 300px
margin= 10px + 10px(上 + 下)

高さ = 320px

こちらも同様に

設定した高さ「height=300px」より大きくなってしまいました。

このことから分かるように

外側へ数値を入れた分、高さは「どんどん加算されて」増えていきます。

2:内側の問題

内側の問題とは、「box-sizing: border-box」で指定した内側はどうなるかの問題です。

内側とは、「width」「height」の内側のことです。

「content-box」には内側はありませんが、「border-box」には内側があります。

1:「content-box」 = 内側はない
2:「border-box」 = 内側の「padding」「border」がある

文字で見るより画像の方がわかりやすいと思います。

<「content-box」には内側がない>

画像blog-css-box-sizing01

<「border-box」には内側の「padding」「border」がある>

画像blog-css-box-sizing02

これら「padding」「border」が大きくなったら
どうなるのでしょうか?

具体的な場所は以下の通りです。

「width」はここ

画像box129

「height」はここ

画像box130

すでに「width」「height」は決定しています。

「width」「height」が勝手に増えることはありません。

となると

どうなるのでしょうか?

結果は

「中央のcontent」がどんどん小さくなっていきます。

その様子を見てみましょう。

<border-boxに「padding」「border」を入れてみた:width>

まずは、widthをみていきましょう。

「border-box」は、
「content」「padding」「border」3つ合わせてwidthになります。

画像blog-decide-the-width13

例えば「width = 500px」だったとします。

すると

下のようになります。

画像blog-width-auto-difference24

そこで

「margin」は、今回関係ないので取り除きます。

とすると

下のようになります。

画像blog-decide-the-width09

すでに「width」は500pxと決定しています。

ここは変わりません。

この状態で「padding」を大きくしたら?

どうなるでしょうか?

結果は「content」が小さくなります。

画像blog-decide-the-width10

さらに

この状態で「border」も大きくしてみましょう。

どうなるでしょうか?

結果は「content」がもっと小さくなります。

画像blog-decide-the-width11

このことから分かるように

「boprder-box」は、
内側の「padding」「border」へ数値を入れると

「中央のcontent」が小さくなります。

<border-boxに「padding」「border」を入れてみた:height>

次は、「height」を見ていきます。

結果は同じです。

「中央のcontent」が小さくなります。

それでは見てましょう。

「border-box」は、
「content」「padding」「border」3つ合わせてheightになります。

画像blog-decide-the-height03

例えば「height = 300px」だったとします。

すると

下のようになります。

画像box111

そこで

「margin」は、今回関係ないので取り除きます。

とすると

下のようになります。

画像blog-decide-the-height08

すでに「height」は300pxと決定しています。

ここは変わりません。

この状態で「padding」を大きくしたら?

どうなるでしょうか?

結果は「content」が小さくなります。

画像blog-decide-the-height10

さらに

この状態で「border」も大きくしてみましょう。

どうなるでしょうか?

結果は「content」がもっと小さくなります。

画像blog-decide-the-height11

このことから分かるように

「boprder-box」は、
内側の「padding」「border」へ数値を入れると

「中央のcontent」が小さくなります。

3:width、heightのauto問題

width、heightのauto問題とは、とにかく「auto」が難しいという問題です。

「auto」というと自動で全てやってくれそうです。

しかし

実際は、「auto」の仕組みを知っていないと思いがけない結果になります。

さらに「box-sizing」が加わると

それはもう、とんでもないことになります。

この「width」「height」の説明は、別記事にしました。

よければ、そちらをご覧ください。

widthとheightとは?幅、高さに関係する重要プロパティ(html,css)(作成中)

「box-sizing」まとめ

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

<content-box>

画像blog-css-box-sizing01

<border-box>

画像blog-css-box-sizing02

「box-sizing」は、非常に難しいプロパティですが、
ボックスモデルが分かれば、すんなり理解できるかもしれません。

ボックスモデルとは?ゆっくりと分かりやすく説明(html,css)

そして

「box-sizing」は、width、heightの「auto」と組み合わさると混迷を極めます。

ここは頑張っていきましょう。

widthとheightとは?幅、高さに関係する重要プロパティ(html,css)(作成中)

以上、
box-sizingとは?幅、高さに関係する重要プロパティ(html,css)
の話でした。

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

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