レイアウトが崩れる！あなたはボックスモデルを本当に理解しているのか！？

レイアウトが崩れる！あなたはボックスモデルを本当に理解しているのか！？

でけぇ、なげぇ。

レイアウトが決まらない殆どの理由はボックスモデルを理解してないからだと思います。

つーか、僕がそうだった、最近やっと解ってきたよ！。

まぁ、そんな訳で僕が解る範囲でボックスモデルの説明をします。

ここ違うよってとこがあったら、是非是非に教えていただけるとありがたいです。

要素の検証

あ、でも、ブラウザでのF12の要素の検証でgoogleclomeの場合

elementか四角に矢印が入ってるとこ押して自分のレイアウトがどうなってるのかの確認は必ずやってくれよな！。

頼むぜ！

という訳で解説に入ります。

ぶっちゃけこれを見てくれ。

d.hatena.ne.jp

イイハナシダッタナー。

終わり。

という訳にもいかないので、二つポイントを書いていきます。

つまづくポイント

その１　widthとheightの中にpaddingとmarginが入っていると勘違いしている。

paddingとmarginも、もちろんborderもwidthとheightの外側にあります。

つまりレイアウトを作るには、widthとheightにmarginとpaddingとborderを足さなければなりません。

widthとheightを計算通りに書いたからと安心していませんか？

それじゃ上手くいきませんぜ。

たぶんこれだけで大分何とかなると思います。

その２　CSSのbackground{ : ;}が効くところを勘違いしている。

という訳で問題

　CSSのbackgroundはどこまで表示されるでしょう。

　　①contentの中、つまりwhidthとheightまで

　　②paddingまで

　　③borderまで

　　④marginまで

さあ、どーれだ？

答えは②のpaddingまでです。

background{ : ; }はpaddingまで効きます。

という事は。

色、画像はpaddingまで表示されるということです。

これ、かなり重要です。

理解の確認

例えば、このパスタサイトの作り方の#recommendの部分

d.hatena.ne.jp

HTML

<div id="recommend">
<h2><img src="img/todaypastaText.png" alt="Today's Pasta 今日の日替わりパスタ"></h2>
<p>ペンネアラビアータ<br>（ピリ辛トマトソースのペンネ）</p>
</div><!-- /#recommend -->

CSS

#recommend {
  width: 300px;
  height: 124px;
  margin-bottom: 30px;
  padding-left: 260px;
  background: #FFF url(img/todaypasta.jpg) no-repeat left top;
}

ここを分析してみてください。

これが理解できたらボックスモデルは僕と同じところまで理解できています。

解説が必要なら後ほど書きます。

でーはー。