見出し画像

ボックスモデルの考え方

HTML&CSSを図解  (オリジナル見解)

ボックスモデルとはMDN↓の考え方です(書いてること英訳とはいえ難しいですよね★)
この概念からわかりやすく個人的見解でボックスモデルにしました



HTMLについて

まずはHTMLについて そもそもMarkupをボックスに入れる(箱「タグ」詰め)と考えます

HTMLについて「タグで囲む=Markup=箱詰め」という考え方

ボックスモデルの考え方

ボックスモデルはタグが表示される時にそれぞれの特性が適用され、CSSで装飾する時に動きが異なり ブロック・インラインボックスにCSSが効く効かないが起こります(↓表参照)

ブロック・インラインボックスの考え方

この辺りを踏まえてコーディングしていかなくてはいけないんです


次回

どのように動くかの参照です↓

これをまた図解の続きを作って更新します




※以前はタグのブロックレベル要素とインライン要素という呼び方でしたがブロックボックスとインラインボックスになりました

いいなと思ったら応援しよう!

noguchinoguchi
応援ありがとうございます!これからも皆様のお役に立てるよう、頑張ります!