HTML・CSSのボックスモデル【初心者の勉強メモ】

HTML・CSSを記述して自サイトの開発をしている初心者です。
レイアウト調整をしているところ、横幅の調整が想像したとおりにならない事案が発生。

ボックスモデルというものへの理解が不足していることが原因でした。
この記事では、ボックスモデルのことをサクッとまとめています。

コンテンツの周りに見えない領域がある

WebページをHTMLで記述するさいは、コンテンツが置かれる領域と、その周囲の領域のサイズを計算して指定する必要がある。

HTMLの記述はレゴブロックを組むことに近いなと思っていたが、ブロックに覆いかぶさる透明な領域があるイメージをすると理解しやすかった。

ボックスモデルのイメージ図

こんな風に、コンテンツの周りにも複数の領域がある。

※イメージ図は『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)』を参考に作成しました。

HTMLで記述していく要素には、主に「ブロック要素」と「インライン要素」とがある。それを組み上げていく。

レイアウトを図に書いたり、それをアタマのなかでしっかりイメージしたりして、最終的にコードに落とし込んでいく。

下記の記事は、ボックスモデルのことからサイズの計算、marginとpaddingの使い分け方まで、非常によくまとまっている。

今更聞けない!エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | ヌーラボ

まとめ

今回のキーワードは、ボックスモデル。

その他の重要ワードは、ブロック要素・インライン要素、マージン(margin)・パディング(padding)。

ABOUTこの記事をかいた人

編集者。メディアづくり・チームづくり・コーチング(編集の)が得意。生きづらさを市場化すべく試行錯誤中。薬を飲むの苦手、手数の多い単純作業苦手、声の大きい人苦手、飲み会苦手。根性叩き直し中。目標はリオネル・滅私。