4. ボックスモデル

CSS のボックスモデルは、ウェブページの要素がどのようにレイアウトされるかを理解するための基本的な概念です。この章では、ボックスモデルの基本的な構造とその各部分について学びます。

4.1 ボックスモデルの構造

ボックスモデルは、要素をボックスとして扱い、そのボックスを構成する以下の 4 つの主要な部分から成り立っています。

コンテンツ (Content): 要素の中身です。テキストや画像などがここに含まれます。
パディング (Padding): コンテンツと境界線 (Border) の間のスペースです。
境界線 (Border): パディングとマージン (Margin) の間の線です。色、幅、スタイルを設定することができます。
マージン (Margin): ボックスの外側のスペースです。他の要素との間隔を設定します。

以下の図でボックスモデルの構造を視覚的に表現します。

+---------------------+
|      Margin         |
|  +---------------+  |
|  |    Border     |  |
|  |  +---------+  |  |
|  |  | Padding |  |  |
|  |  | +-----+ |  |  |
|  |  | |Content| |  |  |
|  |  | +-----+ |  |  |
|  |  +---------+  |  |
|  +---------------+  |
+---------------------+

4.2 ボックスモデルの各部を設定する

ボックスモデルの各部分を設定するために、CSS プロパティを使用します。

4.2.1 コンテンツ (Content)

コンテンツ自体はボックスモデルプロパティによって制御されませんが、コンテンツのサイズを設定するには width と height プロパティを使用します。

.box {
  width: 200px;
  height: 100px;
}

4.2.2 パディング (Padding)

パディングは padding プロパティで設定します。個々の方向 (上、右、下、左) について指定することもできます。

.box {
  padding: 10px; /* すべての方向に10pxのパディング */
  padding-top: 20px; /* 上方向に20pxのパディング */
  padding-right: 15px; /* 右方向に15pxのパディング */
}

4.2.3 境界線 (Border)

境界線は border プロパティで設定します。個々の方向についても設定できます。

.box {
  border: 2px solid black; /* すべての方向に2pxの黒い境界線 */
  border-top: 5px dashed red; /* 上方向に5pxの赤い点線 */
  border-right: 3px dotted green; /* 右方向に3pxの緑のドット線 */
}

4.2.4 マージン (Margin)

マージンは margin プロパティで設定します。パディングと同様に、個々の方向についても指定できます。

.box {
  margin: 20px; /* すべての方向に20pxのマージン */
  margin-bottom: 30px; /* 下方向に30pxのマージン */
}

4.3 ボックスモデルの実際の使用例

以下のようにボックスモデルを実際に使って、要素をスタイリングする例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ボックスモデルの例</title>
    <style>
      .box {
        width: 300px;
        height: 150px;
        padding: 20px;
        border: 5px solid blue;
        margin: 30px;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <div class="box">これはボックスモデルの例です。</div>
  </body>
</html>

上記の例をブラウザで開くと、背景色がライトグレーのボックスが表示され、その周囲にマージンがあり、ボックスの内側にはパディングがあります。また、ボックスの周りには青い境界線が表示されます。

4.4 Box-sizing プロパティ

通常、要素の大きさはコンテンツのサイズとパディング、境界線のサイズを含む形になります。しかし、box-sizing プロパティを用いることで、要素の大きさを簡単に制御できます。

4.4.1 `content-box`

デフォルトでは box-sizing プロパティは content-box に設定されています。これは、要素の width および height がコンテンツ部分のサイズを示し、パディングや境界線は含まれません。

.box {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid blue;
  box-sizing: content-box; /* デフォルトの値 */
}

4.4.2 `border-box`

box-sizing を border-box に設定すると、要素の width および height がパディングと境界線を含む全体のサイズになります。

.box {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid blue;
  box-sizing: border-box;
}

border-box を使うことで、要素の全体のサイズが一致し、レイアウトの調整が容易になります。

これでボックスモデルに関する基本的な概念と実践的な使用例を理解できたかと思います。次に進む前に、いくつかの例題や演習を試してみてください。