手を動かして「ボックスモデル」を理解しよう！
吉田 祥太
こんにちは！ 吉田です！
今日は
コーディング講座の
４回目（だったっけ..？汗）として
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%;
}ではでは！
吉田
ご質問お待ちしています！
投稿者プロフィール
-
フロントエンジニア出身の叩き上げセールスデザイナー
セールスデザイナーとしては５年目。
ノンデザイナー出身でめちゃめちゃ苦労した経験から、
感覚的になりやすいデザインの指導を
理論的かつ再現性ある形で伝えることをモットーにしている。
⇒ 詳しいプロフィールはこちら
最新の投稿
記事2023年12月25日【成果続々！】おめでとうございます！- 記事2023年12月20日「強みがない」デザイナーの生存戦略
- 記事2023年12月4日ガクブルしながら選ばれるデザイナーになろう
- 記事2023年11月27日サービスや営業メールを強くする泥臭い秘訣
