CSSの基礎：ボックスモデル

Posted on by

CSSのボックスモデルは、HTML要素のレイアウトとデザインを理解するための基本的な概念です。
ボックスモデルは、コンテンツ、パディング、ボーダー、
マージンの4つの主要な部分で構成されています。
これらの部分がどのように相互作用し、
要素の全体的なサイズや配置に影響を与えるかを理解することが重要です。

ボックスモデルの概要

HTML要素は、以下の4つの部分で構成されたボックスとして扱われます。

コンテンツ（Content）

要素の実際の内容が表示される領域です。
テキスト、画像、その他のメディアがここに表示されます。

パディング（Padding）

コンテンツとボーダーの間の内側のスペースです。
パディングはボックスの背景色と共に表示されます。

ボーダー（Border）

パディングの外側にある線です。
ボーダーのスタイル、幅、色を指定することができます。

マージン（Margin）

ボーダーの外側にある外側のスペースです。
マージンはボックスと他の要素との間のスペースを作ります。
背景色は表示されません。

ボックスモデルの構造

ボックスモデルの各部分は、次のように構成されています。

/* ボックスモデルの概念 */
.element {
    width: 100px;   /* コンテンツの幅 */
    padding: 10px;  /* パディング */
    border: 5px solid black; /* ボーダー */
    margin: 15px;   /* マージン */
}

この例では、要素のコンテンツの幅が100pxで、各側のパディングが10px、
ボーダーの幅が5px、マージンが15pxです。

各部分の詳細

コンテンツ（Content）

定義

要素の実際の内容が表示される領域です。

.content-box {
    width: 100px;
    height: 50px;
}

パディング（Padding）

定義

コンテンツとボーダーの間の内側のスペースです。

設定方法

パディングは個別に設定することも、一括で設定することもできます。

.padding-box {
    padding-top: 10px;    /* 上 */
    padding-right: 20px;  /* 右 */
    padding-bottom: 10px; /* 下 */
    padding-left: 20px;   /* 左 */
}
/* または */
.padding-box {
    padding: 10px 20px;   /* 上下 左右 */
}

ボーダー（Border）

定義

パディングの外側にある線です。

設定方法

ボーダーの幅、スタイル、色を設定します。

.border-box {
    border-width: 5px;         /* ボーダーの幅 */
    border-style: solid;       /* ボーダーのスタイル */
    border-color: black;       /* ボーダーの色 */
}
/* 短縮プロパティ */
.border-box {
    border: 5px solid black;   /* 幅 スタイル 色 */
}

マージン（Margin）

定義

ボーダーの外側にある外側のスペースです。

設定方法

マージンは個別に設定することも、一括で設定することもできます。

.margin-box {
    margin-top: 15px;    /* 上 */
    margin-right: 25px;  /* 右 */
    margin-bottom: 15px; /* 下 */
    margin-left: 25px;   /* 左 */
}
/* または */
.margin-box {
    margin: 15px 25px;   /* 上下 左右 */
}

ボックスサイズの計算

要素の全体的なサイズは、コンテンツ、パディング、ボーダー、マージンの合計で決まります。

標準のボックスモデル

標準のボックスモデルでは、width と height はコンテンツ領域のみを対象とします。

.box {
    width: 100px;   /* コンテンツの幅 */
    padding: 10px;  /* パディング */
    border: 5px solid black; /* ボーダー */
    margin: 15px;   /* マージン */
}

この場合、要素の全体的な幅は以下のように計算されます。

全体の幅 = コンテンツの幅 + 左右のパディング + 左右のボーダー = 100px + 20px + 10px = 130px

box-sizing プロパティ

box-sizing プロパティを使用すると、width と height の計算方法を変更できます。
border-box に設定すると、パディングとボーダーを含むようになります。

.box {
    box-sizing: border-box;
    width: 100px;   /* 全体の幅 */
    padding: 10px;  /* パディング */
    border: 5px solid black; /* ボーダー */
    margin: 15px;   /* マージン */
}

この場合、要素の全体的な幅は100pxに固定され、パディングとボーダーはその中に収まります。

まとめ

CSSのボックスモデルは、ウェブページの要素のレイアウトを理解し、
スタイルを適用するための基本的な概念です。
コンテンツ、パディング、ボーダー、マージンを適切に設定し、
box-sizing プロパティを使用してボックスのサイズ計算を制御することで、
ウェブページのデザインを柔軟かつ正確にコントロールできます。