CSS実践(3) 「ボックスモデル」「マージン・マージンの相殺」「ボーダー」

1. はじめに

本記事では、CSSの
「ボックスモデル」「マージン・マージンの相殺」「ボーダー」
について記載する。

2. ボックスモデル

ボックスとは？

HTMLタグでマークアップされた要素(タグ+コンテンツ)

ボックスモデルとは？

要素を表示するためのコンテンツ領域の周辺にある、３つの領域(マージン・ボーダー・パディング)のこと。
【図解】

【ボックスモデルを調整できる主なプロパティ】

3. マージン

マージンとは？

ボックスモデルの1番外側の領域のこと。

【サンプル】
※わかりやすく可視化するため、ブラウザ全体にskyblue、要素にblueの背景色を付与。

h1 {
  margin: 50px;
}

【表示例】
<before>

<after>
要素の外側の上下左右すべてに対して50pxのマージンが付与されている。

【デベロッパーツールでの検証】

<検証方法>

※マージンを上下左右別々につけることが可能。

また、上記を簡略化してマージンを付ける方法もある。

①マージンをスペース区切りで上（10px）右（20px）下（30px）左（40px）つける方法。
②マージンをスペース区切りで上下（10px）左右（20px）つける方法。
③マージンをスペース区切りで上（10px）左右（20px）下（30px）つける方法。

4. マージンの相殺

マージンの相殺とは？

5. パディング

パディングとは？

表示要素の内側に設ける余白部分のこと

【サンプル】
※わかりやすく可視化するため、ブラウザ全体にskyblue、要素にblueの背景色を付与。

h1 {
  padding: 50px;
}

【表示例】
<before>

<after>
要素の内側の上下左右すべてに対して50pxのパディングが付与されている。

【デベロッパーツールでの検証】

<検証方法>

※パディングを上下左右別々につけることが可能。

また、上記を簡略化してパディングを付ける方法もある。

①パディングをスペース区切りで上（10px）右（20px）下（30px）左（40px）つける方法。
②パディングをスペース区切りで上下（10px）左右（20px）つける方法。
③パディングをスペース区切りで上（10px）左右（20px）下（30px）つける方法。

6. ボーダー

ボーダーとは？

・マージン領域とパディング領域の間にあるもの。
・日本語で「罫線」を指し、borderでボックスに罫線を引くことができる。

【サンプル】
※わかりやすく可視化するため、ブラウザ全体にskyblue、要素にblueの背景色を付与。

h1 {
  border: solid 10px #f3b94e;
}

・border:ボーダープロパティ
・solid:線の種類
・10px:線の太さ
※solidは実線の意味。点線にしたい場合はdottedとする。(今回は割愛)

参考(MDN border):https://developer.mozilla.org/ja/docs/Web/CSS/border

・#f3b94e:実線の色
【表示例】
<before>

<after>

【デベロッパーツールでの検証】

<検証方法>

7. おわりに

次項:CSS実践(4) 「ボックスの横幅と高さの指定」に続く。