手を動かして「ボックスモデル」を理解しよう！

こんにちは！　吉田です！

今日は
コーディング講座の
４回目（だったっけ..？汗）として

htmlとcssを
理解するのに
めちゃめちゃ重要な

---

ボックスモデル

---

という考え方を
お届けします！

ざっくり言うと

"htmlはすべて
「箱」を作ります。"

という考え方です。

イメージがあれば
意外とカンタンな
理屈なのですが

これがググると
やたら小難しく
書いてあるんですよね。。汗

ボックスモデルが
理解できないと

・marginとpaddingって
同じ余白でしょ？　何がどう違うの？
なんで使い分けするの？

・width（横幅）の設定しているのに
なんか20px増えてるんだけど。。。

といった初心者キラーな
問題にずっと陥ります。笑

LP制作において、
paddingとmarginは
使いこなせると

制作がとっても
ラクになりますし

なにより、
htmlへの恐怖感が
だいぶ薄くなります。笑

もちろん
手を動かして
画面を作りながら
解説していくので

この機会に
コーディングの勉強もしつつ
ボックスモデルの理解も
完璧にしてしまいましょう！

↓↓

動画内で使ったreset.cssは
以下からコピペしてお使いください！
↓↓
https://cssdeck.com/blog/scripts/eric-meyer-reset-css/

（style.cssと同じ要領で、
reset.cssというファイルを作って
その中にコピペして使ってください）

動画の途中で
bodyタグに
入れ込んだ記述はこちら。
↓↓↓

body {
font: normal 18px/1.7 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,Verdana,sans-serif;
text-align: left;
color:#000;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
}

ではでは！

吉田