ボックスモデル
すべてのHTML要素を囲む「箱」の仕組みを理解する
ボックスモデルとは
日常での例え：プレゼントの箱
content（内容）= プレゼント本体
padding（内側の余白）= 緩衝材（プチプチ）
border（枠線）= 箱の厚み
margin（外側の余白）= 箱と箱の間隔
なぜボックスモデルを理解する必要がある？
CSSではすべての要素が「箱」として扱われます。
文字、画像、ボタン...すべてが箱。この箱の仕組みを理解しないと、
「なぜ要素が思った位置にならないのか」が分からなくなります。
margin（外側の余白）
border（枠線）
padding（内側の余白）
content（内容）
Content（内容）
width と height
内容エリアのサイズを指定
css
.box {
width: 200px;
height: 100px;
background: lightblue;
}
/* 最大・最小サイズ */
.responsive {
width: 100%;
max-width: 500px;
min-height: 200px;
}プレビュー
200px × 100px
Padding（内側の余白）
padding の指定方法
内容と枠線の間の余白
css
/* 全方向同じ値 */
.box1 { padding: 20px; }
/* 上下 | 左右 */
.box2 { padding: 10px 20px; }
/* 上 | 左右 | 下 */
.box3 { padding: 10px 20px 30px; }
/* 上 | 右 | 下 | 左（時計回り） */
.box4 { padding: 10px 20px 30px 40px; }
/* 個別指定 */
.box5 {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}プレビュー
padding: 20px
padding: 10px 30px
Border（枠線）
border の指定方法
太さ、スタイル、色を指定
css
/* 一括指定 */
.box1 {
border: 2px solid black;
}
/* 個別指定 */
.box2 {
border-width: 2px;
border-style: solid;
border-color: red;
}
/* 片側だけ */
.box3 {
border-bottom: 3px solid blue;
}
/* 角丸 */
.box4 {
border: 1px solid gray;
border-radius: 10px;
}プレビュー
solid
dashed
dotted
border-radius
border-style の種類
様々な枠線スタイル
css
border-style: solid; /* 実線 */
border-style: dashed; /* 破線 */
border-style: dotted; /* 点線 */
border-style: double; /* 二重線 */
border-style: groove; /* 溝 */
border-style: ridge; /* 尾根 */
border-style: inset; /* 内側 */
border-style: outset; /* 外側 */
border-style: none; /* なし */プレビュー
solid
dashed
dotted
double
groove
ridge
Margin（外側の余白）
margin の指定方法
要素間の余白
css
/* paddingと同じ記法 */
.box1 { margin: 20px; }
.box2 { margin: 10px 20px; }
/* 中央寄せ */
.center {
width: 200px;
margin: 0 auto;
}
/* 負のマージン */
.overlap {
margin-top: -20px;
}プレビュー
margin: 0 auto
(中央寄せ)
(中央寄せ)
マージンの相殺に注意
縦方向で隣接する要素のmarginは、大きい方の値だけが適用されます（相殺）
box-sizing
box-sizingとは？なぜ必要？
「幅200px」と指定した時、何を200pxにするかを決めるプロパティです。
問題：width: 200px + padding: 20px + border: 5px = 実際の幅250px になってしまう！
解決：
解決：
box-sizing: border-box で「全部込みで200px」にできるcontent-box vs border-box
幅の計算方法を変更
css
/* デフォルト: content-box */
/* width = 内容のみ */
/* 実際の幅 = width + padding + border */
.content-box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid;
/* 実際の幅 = 200 + 40 + 10 = 250px */
}
/* 推奨: border-box */
/* width = 内容 + padding + border */
.border-box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
/* 実際の幅 = 200px（指定通り） */
}
/* 全要素に適用（推奨） */
*, *::before, *::after {
box-sizing: border-box;
}プレビュー
content-box (実際: 250px)
width: 200px
border-box (実際: 200px)
width: 200px
display プロパティ
displayとは？
要素がどのように表示されるかを決めるプロパティです。
block：段ボール箱のように、縦に積み重なる（div, p, h1など）
inline：文章の中の単語のように、横に並ぶ（span, a, strongなど）
inline-block：横に並ぶけど、幅・高さを指定できる
none：完全に非表示（画面から消える）
inline：文章の中の単語のように、横に並ぶ（span, a, strongなど）
inline-block：横に並ぶけど、幅・高さを指定できる
none：完全に非表示（画面から消える）
表示モードの変更
block, inline, inline-block, none
css
/* ブロック要素に変換 */
span { display: block; }
/* インライン要素に変換 */
div { display: inline; }
/* インラインだけど幅・高さ指定可能 */
.badge {
display: inline-block;
width: 100px;
padding: 5px;
}
/* 非表示 */
.hidden { display: none; }プレビュー
inlineinline
inline-block
inline-block