ボックスモデルにおける親要素、子要素の混乱(html,css)

こんにちは tanaka です。

今回は、ボックスモデルにおける
親要素、子要素の話をします。


あくまでこれは、
こういった考え方もある、

程度で見ていってください。


ボックスモデルを学んでいると

親要素、子要素、width、height、box-sizingと
たくさん出てきて、
よくわからなくなることは
ありませんか?

そんな場合は、
一度
親要素、子要素を、
別物としてわけで考えてみては
いかがでしょうか。

そう考えると
理解しやすくなります。

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

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

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

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

説明

混乱の原因は、全てを同時に考える事

ボックスモデルを学んでいると

親要素、子要素、width、height、box-sizingと
たくさん出てきて、
よく分からなくなることは
ありませんか?

よく分からなくなることの原因は、
全てを同時に考えようとしている事
だと思われます。

そんな場合は、
一度
親要素、子要素を、
別物としてわけで考えてみては
いかがでしょうか。

まずは、
親要素の
 width、height、box-sizing
を考えて、

画像parent-element-confusion02

次に、
子要素の
 width、height、box-sizing
を考える。

連画像parent-element-confusion04

そして、
最後にそれらを合わせる。

注意)子要素は、親要素のcontentに入ります。

連画像parent-element-confusion02

そう考えると
理解しやすくなります。

具体例

それでは、
上記の考えで、
2通り見本を作ってみます。

まずは親要素を作ります。

親要素は、
分かりやすい数値で
content-boxにします。

親要素)
 width 500px
 height 250px
 content-box

画像parent-element-confusion02

次に子要素を作ります。

子要素)
 width 100%
 height 100%
 content-box

注意)100% = 親要素のcontentの大きさ

連画像parent-element-confusion03

それを合わせる。

注意)子要素は、親要素のcontentに入る。

連画像parent-element-confusion01

次は、
子要素を
border-boxにしてみます。

親要素は同じものを使います。

親要素)
 width 500px
 height 250px
 content-box

画像parent-element-confusion02

次に子要素を作ります。

子要素)
 width 100%
 height 100%
 border-box

注意)100% = 親要素のcontentの大きさ

連画像parent-element-confusion04

それを合わせる。

注意)子要素は、親要素のcontentに入る。

連画像parent-element-confusion02

まとめ

分けて考えると良い

ボックスモデルで
親要素、子要素、width、height、box-sizingと
たくさん出てきて
混乱した時は、

親要素、子要素と分けて考えると良い。

手順

手順
1:親要素作る
2:子要素を作る
3:それを合わせる


1:親要素作る

width 500px
height 250px
content-box

画像parent-element-confusion02

2:子要素を作る

 width 100%
 height 100%
 content-box

連画像parent-element-confusion03

3:それを合わせる。

注意)子要素は、親要素のcontentに入る

連画像parent-element-confusion01

以上、
ボックスモデルにおける
親要素、子要素の混乱(html,css)
の話でした。

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

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