41  CSSボックスモデル

ボックスモデル（box model）は，HTML要素のレイアウトを理解するための基本的な概念です．すべてのHTML要素は，ボックスとして表現され，以下の4つの部分で構成されています．

CSSボックスモデル，CC BY-SA 3.0

41.1 ボーダー

border-styleはボーダーのスタイルを指定するプロパティです．よく使われる値は以下の通りです．

  • none: ボーダーなし
  • solid: 実線
  • dashed: 破線
  • dotted: 点線

border-widthはボーダーの太さを指定するプロパティです．

  • thin: 細いボーダー
  • medium: 通常のボーダー
  • thick: 太いボーダー
  • px: ピクセル単位で指定（例: 2px）

border-colorはボーダーの色を指定するプロパティです．色は名前，HEXコード，RGB値などで指定できます．

border-radiusはボーダーの角を丸くするためのプロパティです．値はピクセル単位で指定します．

以下の例では，ボーダーのスタイル，太さ，色と角の丸みを指定しています．

/* style.css */
#box {
    border-style: solid; /* ボーダーのスタイル */
    border-width: 2px; /* ボーダーの太さ */
    border-color: blue; /* ボーダーの色 */
    border-radius: 10px; /* ボーダーの角を丸くする */
}
<!-- index.html -->
<p>The box below has a solid blue border with a width of 2 pixels and rounded corners.</p>
<div id="box" style="width: 200px; height: 100px;">
    This is a box with a solid blue border.
</div>
ノートボーダーの個別指定

上下左右のボーダーを個別に指定することもできます．例えば，border-top-styleは上のボーダーのスタイル，border-bottom-widthは下のボーダーの太さ，border-left-colorは左のボーダーの色，border-top-right-radiusは右上の角の丸みを指定します．

また，border: border-width border-style border-colorのように，ボーダーのスタイル，太さ，色を一度に指定することもできます．

/* style.css */
#box {
    border: 2px solid blue; /* ボーダーのスタイル，太さ，色を一度に指定 */
}

41.2 マージン

marginは，ボーダーの外側，要素間のスペースを指定するプロパティです．

marginは，以下のように指定できます．

/* style.css */
#box {
    /* マージンの指定 */
    margin: 20px;

    /* ボーダーの指定 */
    border-style: solid;
    border-width: 2px;
}
<!-- index.html -->
<p>The box below has a margin of 20 pixels.</p>
<div id="box" style="width: 200px; height: 100px;">
    This is a box with a margin of 20 pixels.
</div>

マージンは，個別に指定することもできます．例えば，margin-topは上のマージン，margin-rightは右のマージン，margin-bottomは下のマージン，margin-leftは左のマージンを指定します．

/* style.css */
#box {
    margin-top: 10px; /* 上のマージン */
    margin-right: 20px; /* 右のマージン */
    margin-bottom: 30px; /* 下のマージン */
    margin-left: 40px; /* 左のマージン */
}

41.3 パディング

paddingは，コンテンツとボーダーの間のスペースを指定するプロパティです．

paddingは，以下のように指定できます．

/* style.css */
#box {
    /* パディングの指定 */
    padding: 20px;

    /* ボーダーの指定 */
    border-style: solid;
    border-width: 2px;
}
<!-- index.html -->
<p>The box below has a padding of 20 pixels.</p>
<div id="box" style="width: 200px; height: 100px;">
    This is a box with a padding of 20 pixels.
</div>

パディングも，個別に指定することができます．

  • padding-top: 上のパディング
  • padding-right: 右のパディング
  • padding-bottom: 下のパディング
  • padding-left: 左のパディング
/* style.css */
#box {
    padding-top: 10px; /* 上のパディング */
    padding-right: 20px; /* 右のパディング */
    padding-bottom: 30px; /* 下のパディング */
    padding-left: 40px; /* 左のパディング */
}

41.4 ボックスサイズ

デフォルトでは，要素のwidthとheightは，コンテンツの幅と高さを指定します．

box-sizing: border-box;を指定すると，widthとheightにボーダーとパディングのサイズが含まれるようになります．

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Box Model Example</title>
    <style>
        #box1 {
            width: 500px; /* 幅 */
            height: 50px; /* 高さ */
            background-color: lightblue; /* 背景色 */
            border-width: 0px; /* ボーダーの太さ */
            padding: 0px; /* パディング */
            margin: 0px; /* マージン */
        }
        #box2 {
            width: 500px; /* 幅 */
            height: 50px; /* 高さ */
            background-color: lightgreen; /* 背景色 */
            border: 2px solid red; /* ボーダーのスタイル */
            padding: 20px; /* パディング */
            margin: 0px; /* マージン */
        }
        #box3 {
            box-sizing: border-box; /* ボックスサイズをborder-boxに設定 */
            width: 500px; /* 幅 */
            height: 50px; /* 高さ */
            background-color: lightcoral; /* 背景色 */
            border: 2px solid blue; /* ボーダーのスタイル */
            padding: 20px; /* パディング */
            margin: 0px; /* マージン */
        }
    </style>
</head>
<body>
    <p>The boxes below demonstrate the box model.</p>
    <div id="box1">
        This is box 1.
    </div>
    <div id="box2">
        This is box 2 with a border and padding.
    </div>
    <div id="box3">
        This is box 3 with box-sizing set to border-box.
    </div>
</body>
</html>

ボックス全体のサイズはwidth + padding + borderで計算されます．

  • box1:
    • 幅: 500
    • 高さ: 50
  • box2:
    • 幅: 500 + 20 (左パディング) + 20 (右パディング) + 2 (左ボーダー) + 2 (右ボーダー) = 544
    • 高さ: 50 + 20 (上パディング) + 20 (下パディング) + 2 (上ボーダー) + 2 (下ボーダー) = 94
  • box3:
    • 幅: 500
    • 高さ: 50

box-sizing: border-box;を指定すると，要素の全体的なサイズを簡単に制御できるため，下記のようなコードがよく使われます．

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

41.5 ボックスモデルの例

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Box Model Example</title>
    <style>
        #box {
            width: 200px; /* 幅 */
            height: 100px; /* 高さ */
            background-color: lightblue; /* 背景色 */
            border-style: solid; /* ボーダーのスタイル */
            border-width: 2px; /* ボーダーの太さ */
            border-color: blue; /* ボーダーの色 */
            border-radius: 10px; /* ボーダーの角を丸くする */
            padding: 20px; /* パディング */
            margin: 30px; /* マージン */
        }
    </style>
</head>
<body>
    <div id="box">
        This is a box with a solid blue border, padding of 20 pixels, and a margin of 30 pixels.
    </div>
</body>
</html>