CSS ボックスモデル

📢 この記事は gemini-2.5-flash によって翻訳されました

表示モード

表示モードっていうのは、タグの表示方法のことだよ。ウェブページをレイアウトするとき、タグの表示モードに合わせて、適切なタグを選んでコンテンツを配置するんだ。

ブロックレベル要素 (例えば div)
- 1行を占有する
- 幅はデフォルトで親要素の100%になる
- 幅と高さのプロパティを追加すると有効になる
インライン要素 (例えば span)
- 1行に複数表示できる
- 幅と高さのプロパティを設定しても効かない
- 幅と高さのサイズはコンテンツによって決まる
インラインブロック要素 (例えば img)
- 1行に複数表示できる
- 幅と高さのプロパティを設定すると有効になる
- 幅と高さのサイズもコンテンツによって決まる

CSSの display プロパティで表示モードを切り替えられるんだ。値はこれね。

効果	ブロック	インライン	インラインブロック
プロパティ値	block	inline	inline-block

ボックスモデル

役割：ウェブページをレイアウトしたり、ボックスやコンテンツを配置したりする。

ボックスモデルの構成要素：

コンテンツ領域：width & height
パディング (内側の余白)：padding (コンテンツとボックスの端の間に現れる)
ボーダー (境界線)：border
マージン (外側の余白)：margin (ボックスの外側に現れる)

ボーダー (境界線)

プロパティ値：線の太さ線のスタイル色 順序は問わないよ。

よくある線のスタイルはこれらね。

線のスタイル	実線	破線	点線
プロパティ値	solid	dashed	dotted

1
2
3
div {
    border: 1px solid aqua;
}

もちろん、個別方向を設定できるプロパティもあるよ。プロパティ値は上と同じ。

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

パディング (内側の余白)

コンテンツとボックスの端の間の距離を設定する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/* 四方向のパディングが同じ */
div {
    padding: 10px;
}

/* 個別に四方向を設定 */
div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 10px;
}

padding にも複数値の書き方があって、1つのプロパティで4つのパディングを制御できるよ。

値の数	例	意味
一つ	`padding: 10px;`	四方向すべて10px
四つ	`padding: 10px 20px 30px 40px;`	上右下左 (時計回り)
二つ	`padding: 10px 30px 20px;`	上左右下
三つ	`padding: 10px 20px;`	上下左右

サイズ内減モード

デフォルトだと、ボックスのサイズは「コンテンツサイズ + パディングサイズ + ボーダーサイズ」になるんだ。つまり、ボックスに padding や border プロパティを追加すると、ボックスが大きくなっちゃう。

1
2
3
4
5
6
div {
    height: 200px;
    width: 200px;
    /* このボックスのサイズは240*240になる */
    padding: 20px;
}

もしボックスのサイズを200*200にしたいなら、手動で計算して height と width の値を160pxに調整する必要があるんだ。

でも box-sizing: border-box を追加すると、ボックスのサイズは height と width の値のまま維持されるようになるよ。

1
2
3
4
5
6
7
div {
    height: 200px;
    width: 200px;
    /* このボックスのサイズは200*200になる */
    padding: 20px;
    box-sizing: border-box;
}

マージン (外側の余白)

役割：2つのボックス間の距離を空ける。プロパティ値は padding の書き方と同じだよ。

マージンはボックスを大きくしない。

もし margin の左右のプロパティ値を auto に設定すると、そのボックスは水平方向で中央揃えになるよ。

1
2
3
4
5
6
div {
    height: 200px;
    width: 800px;
    /* このボックスは水平方向で中央揃えになる */
    margin: 0 auto;
}

相殺現象 (マージンコラプス)

垂直に並んだ同じ階層の要素は、上下のマージンが相殺されて、値は大きい方のマージンが適用されるんだ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .box1 {
        width: 200px;
        height: 100px;
        background-color: aqua;
        margin-bottom: 10px;
    }
    /* 2つのボックスの間に20pxの間隔ができる */
    .box2 {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        margin-top: 20px;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

崩壊問題 (マージンコラプス)

親子関係のタグで、子要素に上マージンを追加すると崩壊現象が起きるんだ。親要素も一緒に下にずれてしまう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<style>
    .father{
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: aqua;
        /* 2つのボックスが一緒に50px下にずれる */
        margin-top: 50px;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>

解決方法：

子要素の margin をなくして、親要素で padding を使う
親要素に overflow: hidden を設定する
親要素に border-top を設定する

要素のオーバーフロー

ボックスのコンテンツがボックスのサイズを超えると、オーバーフローが発生するんだ。overflow プロパティで、あふれたコンテンツの表示方法を制御できるよ。

プロパティ値	効果
hidden	はみ出た部分を隠す
scroll	はみ出た部分をスクロール (はみ出ているかどうかにかかわらず、スクロールバーを表示する)
auto	はみ出た部分をスクロール (はみ出た場合にのみスクロールバーを表示する)

インライン要素の垂直位置

インライン要素 (例えば span) に margin や padding を追加しても垂直位置は変えられないんだ。この場合は line-height で変更できるよ。

1
2
3
4
5
6
span {
    margin: 50px;
    padding: 20px;
    
    line-height: 100px;
}

角丸効果

border-radius プロパティを使って要素の外側のボーダーを角丸にするんだ。プロパティ値は角丸の半径で、数値とpx、またはパーセンテージが使えるよ。複数値の指定は padding と似てる。

値の数	意味
一つ	四隅すべて設定値になる
四つ	左上右上右下左下 (時計回り)
三つ	左上右上+左下右下
二つ	左上+右下右上+左下

正円の形

正方形のボックスに、角丸のプロパティ値を幅と高さの半分、または50%に設定する。

1
2
3
4
5
6
7
8
div {
    width: 100px;
    height: 100px;
    background-color: aqua;
    
    border-radius: 50%;
    /* もしくは border-radius: 50px */
}

カプセル型

長方形のボックスに、角丸のプロパティ値をボックスの高さの半分に設定する。

1
2
3
4
5
6
7
div {
    width: 100px;
    height: 50px;
    background-color: aqua;
    
    border-radius: 25px;
}

影の効果

box-shadow を使って設定するよ。プロパティ値は：x y ぼかし半径拡散半径色内外の影

このうち x と y は必須だよ。デフォルトでは外側の影になるんだけど、内側の影を設定したい場合はプロパティ値を inset にするんだ。