【CSS】ボックスモデル
HTML要素のボックスモデルについてご紹介します。
ボックスモデル
ボックスモデルはHTML要素の領域=ボックスに関する考え方です。
理解することでスタイルやレイアウトを思ったように編集できるようになる手助けになります。
ボックス
ボックス（要素の領域）は次のように構成されています。
Margin
Border
Padding
Content
Content
Contentはコンテンツ（テキストや画像など）が表示される領域です。
高さをheightプロパティ、横幅をwidthプロパティによって指定できます。
例えば、p要素のテキスト部分がContentの領域です。
<p>コンテンツ</p>Border
BorderはPaddingとContentを囲む境界線です。
境界線はborderプロパティによって指定できます。
例えば、p要素の境界線を付けると次のようになります。
<style>
p {
border: 1px solid black;
}
</style>
<p>テキスト</p>Padding
Paddingは内側の余白（コンテンツと境界線の間の余白）です。
paddingプロパティによって余白のサイズを指定できます。
例えば、p要素に内側の余白を付けると次のようになります。
<style>
p {
padding: 30px;
border: 1px solid black;
}
</style>
<p>テキスト</p>Margin
Marginは外側の余白（境界線の外の余白）です。
marginプロパティによって余白サイズを指定できます。
例えば、p要素に外側の余白を付けると次のようになります。
<style>
p {
margin: 30px;
padding: 30px;
border: 1px solid black;
}
</style>
<p>テキスト</p>ボックスのサイズ
ボックスのサイズとして高さと横幅があります。
それぞれデフォルトでは『content + border + padding + margin』の計算方法で値が計算されます。
※box-sizingプロパティで計算方法を設定できます。
これらはコンテンツの高さ（heightプロパティ）、横幅（widthプロパティ）の値とは異なるので注意が必要です。
ボックスの種類
ボックスはブロックボックスとインラインボックスの２種類あります。
要素の種類（h1やp、aなど）によって初期の種類が異なります。
ブロックボックス
ブロックボックスは次の特徴があります。
- 縦配置される。
- 横幅は可能な限り伸びる。
- 高さ（
height）と横幅（width）を指定できる。 - 内側の余白（
padding）、外側の余白（margin）、境界線（border）は他の要素と被らない。
例として、p要素で確認してみましょう。
<style>
p {
background: #EBAED7;
border: 1px solid black;
}
#text1 {
width: 150px;
height: 30px;
margin: 30px;
padding: 30px;
}
</style>
<p>TEXT TEXT TEXT TEXT</p>
<p id="text1">text text text text</p>background（境界線より内側に背景色を付ける）プロパティで視覚的に分かりやすくしました。
プレビューから各特徴を持っていることが確認できます。
インラインボックス
インラインボックスは次の特徴があります。
- 横配置される。（可能な限り）
- 横幅は最小限。
- 高さ（
height）と横幅（width）を指定できる要素は一部のみ。 - 内側の余白（
padding）、外側の余白（margin）、境界線（border）の一部が他の要素と被る。
例として、a要素で確認してみましょう。
<style>
a {
background: #EBAED7;
border: 1px solid blank;
}
#text1 {
margin: 30px;
padding: 30px;
}
#text2 {
width: 150px;
height: 30px;
}
</style>
<a>TEXT TEXT TEXT TEXT</a>
<a id="text1">text text text text</a>
<a id="text2">xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx</a>こちらもbackgroundプロパティで視覚的に分かりやすくしました。
特徴確認のためプレビューが複雑になっており、少し分かりづらいですが、３つ目のp要素は途中で改行され、他のp要素の内側余白と被っていることが分かります。
その他の特徴についてもプレビューから確認できます。
