高さの決め方 heightとbox-sizingの話(html,css)

こんにちは tanaka です。

高さの決め方
height、box-sizingの話をします。

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


例)
 1:高さの数量    = 100px
 2:ボックスモデル  = content

height: 100px
box-sizing: content-box

画像blog-decide-the-height01

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

 1:height: auto
 2:height: 100%

があります。

1:height: auto

 height: autoは、
 親要素で使います。

 親要素が中身に合わせて、
 自動で伸び縮みします。

2:height: 100%

 height: 100%は、
 子要素で使います。

 親要素の高さをを100%として
 子要素の高さを%で決めることができます。

例)
height: 50% = 親要素content高さの50%


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

content-box(contentだけ適用)

画像blog-decide-the-height02

border-box(borderまで適用)

画像blog-decide-the-height03

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

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

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

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

説明

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

1:高さの数量を決める(height)

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

1:高さの数量を決める(height)

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

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

その他
heightには、

具体的な数値でない

 height: auto
 height: 100%

などもあります。

height: auto

 height: autoは、
 親要素で使います。

 親要素が中身に合わせて、
 自動で伸び縮みします。

画像blog-height-auto-anime01
height: 100%

 height: 100%は、
 子要素で使います。

 親要素の高さをを100%として
 子要素の高さを%で決めることができます。

画像blog-difference-of-height05

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

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

そして、
値は

content-box
border-box

の2種類あります。

content-box

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

box-sizing: content-box

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

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

box-sizing: border-box

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

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

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

例えば、
content-boxで言うと

padding、border、margin
のことです。

画像blog-decide-the-height02

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

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

例)

height = 100px
box-sizing = content-box

画像blog-decide-the-height04

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

heightで決定した100pxへ
加算されます。

画像blog-decide-the-height05

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

さらに
加算されます。

画像blog-decide-the-height06

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

さらに
加算されます。

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

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

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

border-boxは、
heightに対して
 ・外側 margin
 ・内側 padding、border
があります。

画像blog-decide-the-height03

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

例)

height = 300px
box-sizing = border-box

画像blog-decide-the-height08

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

heightで決定した300pxへ
加算されます。

画像blog-decide-the-height09

それでは、

内側のpadding、borderへ
値を入れたら
どうなるのでしょうか?

結果から言いますと、

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

例)

width = 300px
box-sizing = border-box

画像blog-decide-the-height08

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

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

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

画像blog-decide-the-height10

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

高さの数量と
paddingの数量が
変わらないため、

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

画像blog-decide-the-height11

まとめ

手順

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

この手順で決める。

height

高さの数量を決めるには
heightを使い数量を入れる。

height: 100px;
height: 20em;
など

box-sizing

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

box-sizing:content-box

画像blog-decide-the-height02

box-sizing:border-box

画像blog-decide-the-height03
height autoと100%

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

auto 

 height: autoは、
 親要素で使う。

 親要素が中身に合わせて、
 自動で伸び縮みする。

画像blog-height-auto-anime01

100%

 height: 100%は、
 子要素で使う。

 親要素の高さをを100%として
 子要素の高さを%で決められる。

画像blog-difference-of-height05

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

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

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

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

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