CSS 入門

CSS ボックスモデルの理解

CSSボックスモデル（Box Model）は、ウェブページ上の要素がどのようにレンダリングされるかを理解するための基礎です。本質的に、これはすべてのHTML要素を「長方形のボックス」として記述する仕組みです。

本章では、ボックスモデルをその核心的なコンポーネントであるコンテンツ（Content）、パディング（Padding）、ボーダー（Border）、およびマージン（Margin）に分解し、それらがどのように組み合わさって要素の全体的なサイズと外観を決定するのかを解説します。

1. CSS ボックスモデル：詳細解析

CSSボックスモデルは、要素の異なる部分がどのように相互作用してウェブページ上の最終的な視覚的プレゼンテーションを作成するかを規定します。これらのコンポーネントは、まるで玉ねぎのように層状に重なっています。

1.1 コンテンツ (Content)

コンテンツはボックスモデルの最も内側の部分です。これは、要素が表示する実際のテキスト、画像、またはその他のメディアを表します。コンテンツ領域の寸法は、通常 width（幅）と height（高さ）プロパティによって決定されます。

示例：
"Hello, world!" というテキストを含む <div> 要素を考えてみましょう。"Hello, world!" というテキストそのものがコンテンツです。

<div>Hello, world!</div>

デフォルトでは、コンテンツはその親要素の利用可能な幅を埋めるように拡張されます。コンテンツが指定された高さを超えると、オーバーフロー（溢れ）が発生します。

1.2 パディング (Padding)

パディングは、コンテンツとボーダーの間のスペースです。コンテンツの周囲にバッファ（緩衝地帯）を作成し、コンテンツが直接ボーダーに触れるのを防ぎます。

パディングは padding プロパティで制御され、要素の4つの辺に対して一括設定することも、padding-top、padding-right、padding-bottom、padding-left を使用して個別に設定することもできます。

示例：
上記の <div> 要素にパディングを追加します。

div {
  padding: 20px; /* 4つの辺すべてに 20px のパディングを追加 */
}

これにより、"Hello, world!" テキストと要素の縁（またはボーダー）の間に 20ピクセルの空間が生まれます。

個別のパディングプロパティ設定：

div {
  padding-top: 10px;    /* 上パディング */
  padding-right: 15px;  /* 右パディング */
  padding-bottom: 20px; /* 下パディング */
  padding-left: 25px;   /* 左パディング */
}

ショートハンド（Shorthand）プロパティ：
時計回り（上、右、下、左）の順序でパディングを一括設定できます。

  • padding: 10px;（4辺すべて 10px）
  • padding: 10px 20px;（上下 10px、左右 20px）
  • padding: 10px 20px 30px;（上 10px、左右 20px、下 30px）
  • padding: 10px 20px 30px 40px;（上 10px、右 20px、下 30px、左 40px）

1.3 ボーダー (Border)

ボーダーはパディングとコンテンツを囲む線です。要素に視覚的な境界を提供し、異なる色、幅、スタイルを設定できます。border プロパティは、border-width、border-style、border-color を一括で設定するためのショートハンドです。

示例：

div {
  border: 2px solid black; /* 幅 2px、黒の太実線ボーダー */
}

個別のボーダープロパティ：

  • border-width: ボーダーの太さを指定（例：1px, thick）。
  • border-style: ボーダーのスタイルを指定（例：solid（実線）、dashed（破線）、dotted（点線）、none（なし））。
  • border-color: ボーダーの色を指定。

辺ごとに異なるボーダーを設定することも可能です。

div {
  border-top: 2px solid red;
  border-right: 1px dashed blue;
  border-bottom: 3px dotted green;
  border-left: 4px double purple;
}

1.4 マージン (Margin)

マージンはボーダーの外側のスペースです。要素とその隣接する要素との間に間隔を作ります。マージンは透明であり、背景色を受け入れることはありません。

示例：

div {
  margin: 30px; /* 4つの辺すべてに 30px のマージンを追加 */
}

個別のマージンプロパティ設定：

div {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
}

ショートハンドの書き方はパディングと同様に、上・右・下・左の順で適用されます。

マージンの相殺 (Margin Collapsing)：
重要な概念として「マージンの相殺」があります。2つの垂直に隣接するブロックレベル要素の上下マージンが重なるとき、それらは1つのマージンに統合されます。そのサイズは、2つのマージンのうち大きい方の値に等しくなり、合計値にはなりません。これは垂直方向のみに適用されるルールです。

示例：

<div style="margin-bottom: 20px;">最初の div</div>
<div style="margin-top: 30px;">二番目の div</div>

この場合、2つの <div> 間の実際の距離は 50px ではなく、大きい方の値である 30px になります。

1.5 ボックスモデル図解

2. 実戦例とデモンストレーション

2.1 示例 1：シンプルなプロフィールカード

ウェブサイト用のシンプルなユーザープロフィールカードを作成してみましょう。

<div class="profile-card">
  <img src="avatar.jpg" alt="ユーザーアバター">
  <h3>John Doe</h3>
  <p>John Doe に関する簡単な紹介文です。</p>
</div>
.profile-card {
  width: 300px;      /* コンテンツの幅 */
  padding: 20px;     /* コンテンツとボーダーの間のスペース */
  border: 1px solid #ccc; /* 控えめなグレーのボーダー */
  margin: 20px;      /* カードの周囲のスペース */
}

.profile-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* アバターを円形にする */
  margin-bottom: 10px; /* アバターと名前の間のスペース */
}

.profile-card h3 {
  margin-bottom: 5px; /* 名前と紹介文の間のスペース */
}

この例では、ボックスモデルのプロパティを駆使して、カードのサイズ、間隔、外観を制御しています。

2.2 示例 2：ナビゲーションメニューのスタイリング

水平方向のナビゲーションメニューの例です。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
nav ul {
  list-style: none; /* リストの点を消す */
  margin: 0;        /* デフォルトのマージンを削除 */
  padding: 0;       /* デフォルトのパディングを削除 */
  background-color: #333;
}

nav li {
  display: inline-block; /* リスト項目を水平に並べる */
}

nav a {
  display: block;   /* リンクをリスト項目いっぱいに広げる */
  color: white;
  text-decoration: none;
  padding: 14px 16px; /* クリック領域を拡大する（重要！） */
}

nav a:hover {
  background-color: #ddd;
  color: black;
}

この例では、padding を使用してリンク内のテキストの周囲に余白を作り、クリックしやすいUIを実現しています。また、<ul> 要素のデフォルトのマージンとパディングを 0 に設定することで、ブラウザ固有の余計な余白をリセットしています。