幅の決め方 widthとbox-sizingの話(html,css)

こんにちは tanaka です。

幅の決め方
widthとbox-sizingの話をします。

幅は、
 1:幅の数量(width)
 2:ボックスモデルをどこまで使うか(box-sizing)
この手順で決めます。


例)
 1:幅の数量    = 500px
 2:ボックスモデル = content

width: 500px
box-sizing: content-box

画像blog-decide-the-width01

widthには、
具体的な数値でない

 1:width: 100%
 2:width: auto

があります。

1:width: 100%

width: 100%は
親要素のcontentの幅を100%として
子要素の数量をパーセントで決める事ができます。

例)
width: 50% = 親要素content幅の50%

2:width: auto

width: autoは
条件に従い
対処してくれます。

display: inline
display: inline-block
width: auto文字列の幅が
contentの幅になる
display:blockwidth: auto親要素content幅を
引き継いで幅の数量とし
その中へ
自らのボックスモデル全てを入れる
(content+padding+border+margin)
画像blog-decide-the-width02

box-sizingは、
2種類あります。

content-box(contentだけ適用)

画像blog-decide-the-width12

border-box(borderまで適用)

画像blog-decide-the-width13

それでは
詳しく説明して行きます。

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

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

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

説明

幅は、この手順で決めます。

1:幅の数量を決める(width)

2:数量をボックスモデルの
  どこまで使うか決める。
  (ボックスモデルへの適用)
 (box-sizing)

1:幅の数量を決める(width)

widthは、
具体的な数値を入れて
数量を決めます。

width: 500px;
width: 20em;
など

その他widthには、

具体的な数値でない

 width: 100%
 width: auto

というのもあります。

width: 100%

  親要素のcontentの幅を100%として
  子要素の数量をパーセントで決める事ができます。

例)
width: 50% = 親要素content幅の50%

width: auto

  条件に従い
  幅などの決定をしてくれます。

display: inline
display: inline-block
width: auto文字列の幅が
contentの幅になる
display:blockwidth: auto親要素content幅を
引き継いで幅の数量とし
その中へ
自らのボックスモデル全てを入れる
(content+padding+border+margin)
画像blog-decide-the-width02

2:ボックスモデルへの適用(box-sizing)

box-sizingは、
ボックスモデルのどこまで使うか
(ボックスモデルへの適用)を決めます。

そして、
値は

content-box
border-box

の2種類あります。

content-box

contentだけ、
ボックスモデルへ適用させる

box-sizing: content-box

画像blog-decide-the-width12
border-box

borderまでを
ボックスモデルへ適用させる

box-sizing: border-box

画像blog-decide-the-width13
適用外はどうなるのか

おそらくここで
1つ疑問がわくと思います。

widthに選ばれなかった
ボックスモデルへ数値を入れると
どうなるのか?

例えば、
content-boxで言うと

padding、border、margin
のことです。

画像blog-decide-the-width12

結果から言いますと、
widthへ加算されます。

widthで決定した数量へ
どんどん加算されて行きます。

例)

width = 500px
box-sizing = content-box

画像blog-decide-the-width03

ここに
padding:10px
を入れると、

widthで決定した500pxへ
加算されます。

画像blog-decide-the-width04

さらにここへ
border:10px
を入れると、

さらに
加算されます。

画像blog-decide-the-width05

さらにここへ
margin:10px
を入れると、

さらに
加算されます。

画像blog-decide-the-width06
適用内はどうなるのか

まだ1つ
疑問が残っているはずです。

box-sizingには
content-boxの他に
もう1つ
border-boxがあります。

border-boxには、
widthの
 ・外側 margin
 ・内側 padding、border
があります。

画像blog-decide-the-width13

widthの外側の
marginは、
追加で加算されます。

例)

width = 500px
box-sizing = border-box

画像blog-decide-the-width07

ここに
margin:10px
を入れると、

widthで決定した500pxへ
加算されます。

画像blog-decide-the-width08

それでは、
内側のpadding、borderへ

値を入れたらどうなるのでしょうか?

結果から言いますと、

contentが圧縮され
小さくなって行きます。

例)

width = 500px
box-sizing = border-box

画像blog-decide-the-width09

ここの
paddingの数量を
大きくすると

幅の数量は変わらないため、

その分
contentが圧縮され
小さくなって行きます。

画像blog-decide-the-width10

次は
borderの数量を
大きくすると

幅の数量とpaddingの数量は
変わらないため、

その分
contentが圧縮され
小さくなって行きます。

画像blog-decide-the-width11

まとめ

手順

幅は、
1:幅の数量を決める。
2:数量をボックスモデルの
  どこまで使うかを決める。
  (ボックスモデルへの適用)

この手順で決める。

width

幅の数量を決めるには
widthを使い数量を入れる。

width: 500px;
width: 20em;
など

box-sizing

数量をボックスモデルのどこまで使うかは
box-sizingを使う。

box-sizing: content-box

画像blog-decide-the-width12

box-sizing: border-box

画像blog-decide-the-width13
width 100%とauto

widthは、
 100%
 auto
と、具体的な数値でない
値もある。

100%
  親要素のcontentの幅を100%として
  幅をパーセントで決める事ができます。

例)
width: 50% = 親要素content幅の50%

auto
  条件に従い
  幅などの決定をしてくれます。

display: inline
display: inline-block
width: auto文字列の幅が
contentの幅になる
display:blockwidth: auto親要素content幅を
引き継いで幅の数量とし
その中へ
自らのボックスモデル全てを入れる
(content+padding+border+margin)
画像blog-decide-the-width02

width: 100% と width: autoの
違いについての
記事を用意しました。

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

以上、
幅の決め方 widthとbox-sizingの話(html,css)
の話でした。

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

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