はじめに
前回はクラスとIDを学んで、同じタグでもデザインを変えられるようになりましたね！
今回はいよいよボックスモデルに入ります。
「paddingを増やしたのになんか違う…」「marginってどこに効いてるの？」
CSSを書いていると、この2つで混乱することがよくあります。でも一度理解してしまえば、レイアウトがぐっとコントロールしやすくなります。一緒に整理していきましょう！
この記事でできるようになること
この記事を読み終えると、paddingとmarginの違いがわかり、余白を自在に調整できるようになります。「なんとなくわかった！」でOKです。手を動かしながら覚えていきましょう。
ボックスモデルとは？
HTMLのすべての要素は、目に見えない箱（ボックス）として扱われます。
その箱は4つの層でできています。
- content：実際のテキストや画像
- padding：内側の余白（コンテンツと枠線の距離）
- border：枠線
- margin：外側の余白（他の要素との距離）
paddingとは？
paddingは、コンテンツと枠線（border）の間の内側の余白です。
.box {
background-color: #e8f0fe;
padding: 16px;
}paddingを増やすと、箱の中身が枠から離れます。背景色はpaddingの範囲にも広がります。
marginとは？
marginは、要素と要素の間の外側の余白です。
.box {
background-color: #e8f0fe;
margin: 32px;
}marginを増やすと、他の要素との距離が広がります。背景色はmarginには広がりません。
paddingとmarginの違いをまとめると
| padding | margin | |
|---|---|---|
| 位置 | 内側の余白 | 外側の余白 |
| 背景色 | 適用される | 適用されない |
| 用途 | 文字と枠の間隔を空けたい | 要素同士の距離を空けたい |
上下左右を個別に指定する
paddingもmarginも、上下左右を個別に指定できます。
.box {
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
}まとめて書くこともできます（上→右→下→左の順）。
.box {
padding: 8px 16px 8px 16px;
}上下・左右が同じ場合はさらに短く書けます。
/* 上下8px、左右16px */
.box {
padding: 8px 16px;
}実践：自己紹介ページに適用しよう
前回の自己紹介ページに、ボックスモデルを意識したスタイルを追加してみましょう！
<!DOCTYPE html>
<html>
<head>
<title>私の自己紹介ページ</title>
<style>
body {
background-color: #f9f9f9;
color: #333333;
font-size: 16px;
margin: 0;
}
#main-title {
color: #ffffff;
background-color: #3a86ff;
font-size: 32px;
padding: 24px 16px;
margin: 0;
text-align: center;
}
.section-title {
color: #3a86ff;
font-size: 22px;
margin: 32px 0 8px;
border-left: 4px solid #3a86ff;
padding-left: 12px;
}
.profile-card {
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 8px;
padding: 24px;
margin: 16px 0;
}
.highlight {
background-color: #fff9c4;
padding: 4px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1 id="main-title">私の自己紹介ページ</h1>
<h2 class="section-title">プロフィール</h2>
<div class="profile-card">
<p>はじめまして！プログラミングを勉強中の<span class="highlight">Sue</span>です。</p>
<p>コーヒーを飲みながらコードを書くのが好きです。</p>
</div>
</body>
</html>.profile-cardに注目してください。paddingで内側に余白を作り、marginで上下の間隔を調整しています。borderと組み合わせることで、カードのような見た目になりますよ。
よくあるミス
margin: 0 auto という書き方を見たことがあるかもしれません。これは要素を中央寄せにするときの定番の書き方です。ただし、要素にwidthが指定されていないと効きません。
.container {
width: 600px;
margin: 0 auto; /* 左右中央に配置 */
}まとめ
今回はボックスモデルを学びました。
- padding：内側の余白。背景色が広がる
- margin：外側の余白。要素間の距離を調整する
- 上下左右を個別に、またはまとめて指定できる
- 迷ったらブラウザの開発者ツールでボックスを確認してみよう！
「なんか思ったより隙間が空いてる…」というとき、原因はたいていpaddingかmarginです。この2つを意識するだけで、レイアウト調整がぐっと楽になります。
次回はFlexboxに入ります。横並びのレイアウトを簡単に作れる、現代のCSSに欠かせない機能です。「なんで横に並ばないの！」という悩みを一気に解決しますよ。お楽しみに！
コメント