みなさん、こんにちは。どんぶラッコです。
今日は、ボックスモデルについてお話しします。
あまり聞き馴染みのない言葉かもしれません。
CSS にはボックスモデルという概念があり、HTML要素を4つの領域に分けて制御しようという考え方です。
margin, padding という言葉は聞き馴染みがあるかもしれませんね！
ということで、今回はボックスモデルのことを一緒に勉強していきましょう！
ボックスモデルを図解する
図解するとこんな感じです。
領域は、内側から順番に content, padding, border, margin となっています。
コンテンツ領域
実際のコンテンツが表示される場所です。
例えば、 <p>こんにちは</p> であれば、”こんにちは”という文字そのものがコンテンツ領域になりますし、 <img src="***"> であれば、画像そのものがコンテンツになります。
パディング領域
パディングとは、コンテンツ領域の外側の余白を拡張する領域のことです。コンテンツ領域の背景色を保ったまま周囲の余白を増やしたい時などに使います。
ボーダー領域
要素の境界に表示される領域です。線として表示されます。
マージン領域
ボーダー領域の外側の余白です。隣の要素との間を開けたい場合に使います。
マージンにはマージンの相殺と呼ばれる概念があり、隣接する要素同士にマージンが設定されていた場合、大きい方のマージンに統合される挙動をするので注意です。
実際のサイトのmargin, paddingをみてみよう！
実は要素はこの4つの領域をうまくいじることで見た目や大きさが調整されているのです。
実際のサイトでどのようにmargin, paddingが設定されているのか？についてはデベロッパーツールを見ることで確認することができます。
Chromeブラウザ上で右クリック → 検証 を選択することで確認することができます。
ボックスモデルは最初「？」となるポイントだと思います。マスターしてCSSレイアウトをできるマンになっちゃいましょう！
