HTML・CSSを記述して自サイトの開発をしている初心者です。
レイアウト調整をしているところ、横幅の調整が想像したとおりにならない事案が発生。
ボックスモデルというものへの理解が不足していることが原因でした。
この記事では、ボックスモデルのことをサクッとまとめています。
コンテンツの周りに見えない領域がある
WebページをHTMLで記述するさいは、コンテンツが置かれる領域と、その周囲の領域のサイズを計算して指定する必要がある。
HTMLの記述はレゴブロックを組むことに近いなと思っていたが、ブロックに覆いかぶさる透明な領域があるイメージをすると理解しやすかった。
ボックスモデルのイメージ図
こんな風に、コンテンツの周りにも複数の領域がある。
※イメージ図は『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)』を参考に作成しました。
HTMLで記述していく要素には、主に「ブロック要素」と「インライン要素」とがある。それを組み上げていく。
レイアウトを図に書いたり、それをアタマのなかでしっかりイメージしたりして、最終的にコードに落とし込んでいく。
下記の記事は、ボックスモデルのことからサイズの計算、marginとpaddingの使い分け方まで、非常によくまとまっている。
今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | ヌーラボ
まとめ
今回のキーワードは、ボックスモデル。
その他の重要ワードは、ブロック要素・インライン要素、マージン（margin）・パディング（padding）。
