【CSS講座】ボックスモデル

前回は class と id について学習しました。

【CSS講座】classとid

2018年9月30日

今回は、ボックスモデルについてです。

各要素を箱としてイメージしてとらえる考え方です。

それでは見ていきましょう。

ボックスモデルの領域

ボックスモデルは4つの領域で構成されています。

コンテント領域

要素そのものが表示される領域です。

width（幅）や height（高さ）プロパティでサイズを指定することができます。

パディング領域

コンテント領域の周りの領域。

パディング領域の周りにはボーダー領域があり、つまり内側の余白のことです。

padding（パディング）プロパティでサイズを指定することができます。

ボーダー領域

パディング領域の周りの領域。

枠線のことです。

border（ボーダー）プロパティでサイズを指定することができます。

マージン領域

ボーダー領域の周りの領域。

つまり外側の余白のことです。

margin（マージン）プロパティでサイズを指定することができます。

コーディングの例

実際にどんな感じかコーディングしてみます。

まずは、HTMLファイルから。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ぱそたのCSS講座</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>ボックスモデル</h1>
</body>
</html>

続いて、スタイルシート（style.css）を編集します。

body {
  margin:0px;
  padding:0px;
}
h1 {
  background-color:blue;
  width:400px;
  height:80px;
  padding:20px;
  border:10px solid black;
  margin:20px;
}

bodyタグにもスタイルを指定したのは、見た目をわかりやすくするためです。

実は、margin（マージン）や padding（パディング）は初期値のようなものがあって。

ブラウザによっても初期値が異なる場合があるのです。

今回は bodyタグしかリセットしていませんが。

本格的にサイト制作を行う場合は、スタイルの初期化を意識した方が良いのです。

ブラウザ（Edge）で表示させるとこんな感じです。