6日でできる 新HTML入門｜CSSによる余白の指定
余白を整えると、ページはもっと読みやすくなる。paddingとmarginを使い分けて、見た目にゆとりのあるWebデザインを作ろう。
Webページを見やすく整えるうえで、余白はとても大切な役割を持っています。文字や画像、ボックスがぎゅうぎゅうに詰まっていると、内容が読みにくくなり、どこに注目すればよいのか分かりづらくなります。反対に、適切な余白があると、情報のまとまりが見えやすくなり、ページ全体に落ち着いた印象が生まれます。
CSSで余白を指定するときは、主にpaddingとmarginを使います。paddingは要素の内側に作る余白です。文字と枠線の間にスペースを入れたいときに使います。marginは要素の外側に作る余白です。要素同士の間隔を空けたいときに使います。
たとえば、カード型のボックスでは、文字が枠線に近すぎると窮屈に見えます。この場合はpaddingを使って、内側に余白を作ります。一方、カードとカードの間を空けたいときはmarginを使います。このように、内側の余白と外側の余白を使い分けることで、読みやすく整理されたレイアウトを作れます。
余白は、単に空白を作るだけの指定ではありません。情報の区切り、視線の流れ、ページ全体のバランスを整えるための大切なデザイン要素です。ここでは、paddingとmarginの基本から、上下左右の個別指定、ショートハンド指定、マージンの相殺、中央配置、ボックスモデルとの関係まで、具体的なHTMLサンプルを使いながら学んでいきます。
paddingは要素の内側に余白を作る
paddingは、要素の内側に余白を作るCSSです。文字や画像などの内容と、枠線や背景の端との間にスペースを入れたいときに使います。
たとえば、背景色を付けたボックスの中に文字を入れる場合、paddingがないと文字が端にくっついて見えてしまいます。paddingを指定すると、文字のまわりにゆとりができ、読みやすい見た目になります。
paddingの基本的な考え方
| 指定 | 役割 |
|---|---|
| padding | 上下左右の内部余白をまとめて指定する |
| padding-top | 上の内部余白を指定する |
| padding-right | 右の内部余白を指定する |
| padding-bottom | 下の内部余白を指定する |
| padding-left | 左の内部余白を指定する |
paddingは、要素の背景色が表示される範囲の内側に含まれます。つまり、背景色を付けた要素にpaddingを指定すると、余白部分にも背景色が広がります。
paddingのショートハンド指定
paddingは、値の数によって指定される場所が変わります。1つから4つまでの値を指定でき、半角スペースで区切って書きます。
| 値の数 | 指定される場所 | 例 |
|---|---|---|
| 1つ | 上下左右すべて | padding: 20px; |
| 2つ | 上下、左右 | padding: 20px 10px; |
| 3つ | 上、左右、下 | padding: 20px 10px 30px; |
| 4つ | 上、右、下、左 | padding: 20px 10px 30px 15px; |
4つ指定するときの順番は、上、右、下、左です。時計回りに指定すると覚えると分かりやすくなります。
図1：paddingで要素の内側に余白を作る
この図から分かること
paddingは、要素の内側に作る余白です。文字と枠線の間にスペースを入れることで、内容が読みやすくなります。背景色を指定した要素では、padding部分にも背景色が広がるため、カードやメッセージボックスの見た目を整えるときに役立ちます。
paddingで読みやすいボックスを作る
まずは、paddingのショートハンド指定を使って、ボックスの内側に余白を作る例を見ていきましょう。
ファイル名： Lesson15-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>内部余白の基本</title>
<style>
body {
font-family: sans-serif;
background-color: #FAFAFA;
}
.message-box {
background-color: #FFF3E0;
border: solid 2px #F57C00;
width: 320px;
margin: 24px auto;
padding: 24px 12px;
line-height: 1.7;
}
</style>
</head>
<body>
<div class="message-box">
paddingを指定すると、文字と枠線の間にゆとりが生まれます。
上下を広めにすると、落ち着いた読みやすいボックスになります。
</div>
</body>
</html>ブラウザの表示例
このHTMLでは、div要素にmessage-boxというclassを付けています。CSSでは、padding: 24px 12px;を指定しています。
この指定では、上下の内部余白が24px、左右の内部余白が12pxになります。上下に少し広めの余白を作ることで、文章がゆったり見えます。左右にも余白があるため、文字が枠線に近づきすぎず、読みやすいボックスになります。
また、margin: 24px auto;も指定しています。これは外側の余白に関する指定です。上下には24pxの外部余白を作り、左右はautoにすることで、幅を指定したボックスを中央に配置しています。paddingとmarginは同じ余白に見えることがありますが、paddingは内側、marginは外側という違いがあります。
paddingを上下左右で個別に指定する
paddingはまとめて指定するだけでなく、上下左右を個別に指定することもできます。デザインによっては、上だけ広くしたい、左だけ余白を多めにしたい、といった場面があります。
そのような場合は、padding-top、padding-right、padding-bottom、padding-leftを使います。
paddingの個別指定でできること
| CSS | 指定する場所 | 使いやすい場面 |
|---|---|---|
| padding-top | 上の内部余白 | 見出しの上にゆとりを出したいとき |
| padding-right | 右の内部余白 | 右端の文字詰まりを防ぎたいとき |
| padding-bottom | 下の内部余白 | 下側に余裕を作りたいとき |
| padding-left | 左の内部余白 | 左側に強調線やアイコンがあるとき |
ファイル名： Lesson15-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>内部余白の個別指定</title>
<style>
body {
font-family: sans-serif;
background-color: #FAFAFA;
}
.guide-card {
background-color: #E8F5E9;
border: solid 2px #388E3C;
width: 300px;
margin: 24px auto;
padding-top: 32px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 24px;
line-height: 1.7;
}
</style>
</head>
<body>
<div class="guide-card">
上の余白を広くし、左にも少し余裕を持たせた案内カードです。
余白の量を変えると、文字の位置や見た目の印象も変わります。
</div>
</body>
</html>ブラウザの表示例
この例では、上下左右のpaddingを個別に指定しています。上の余白を32px、右を12px、下を8px、左を24pxにしています。
上側に広めの余白を作ると、ボックス全体がゆったりした印象になります。左側にも余白を少し多めに取ることで、文章の開始位置が落ち着いて見えます。逆に、下の余白は少なめにしているため、ボックスの下側は少し引き締まった印象になります。
個別指定は、細かな調整をしたいときに便利です。ただし、毎回4つのプロパティを書くとCSSが長くなるため、基本はpaddingのショートハンドを使い、必要なときだけ個別指定を使うと整理しやすくなります。
marginは要素の外側に余白を作る
marginは、要素の外側に余白を作るCSSです。要素同士の間隔を空けたいときに使います。
paddingが要素の内側の余白であるのに対して、marginは要素の外側の余白です。たとえば、カードとカードの間を空ける、見出しと本文の間隔を調整する、ボックスを中央に配置する、といった場面で使います。
paddingとmarginの違い
| CSS | 余白ができる場所 | 主な目的 |
|---|---|---|
| padding | 要素の内側 | 内容と枠線の間を空ける |
| margin | 要素の外側 | 要素同士の間隔を空ける |
この違いはとても大切です。文字が枠に近すぎる場合はpaddingを使います。ボックス同士が近すぎる場合はmarginを使います。
図2：paddingとmarginの違い
この図から分かること
paddingは要素の内側、marginは要素の外側に作る余白です。文字と枠線の間を広げたいときはpadding、要素同士の距離を空けたいときはmarginを使います。この違いを理解すると、レイアウトの調整がしやすくなります。
marginで要素同士の間隔を調整する
marginもpaddingと同じように、1つから4つの値で指定できます。値の数による考え方もpaddingと同じです。
marginのショートハンド指定
| 値の数 | 指定される場所 | 例 |
|---|---|---|
| 1つ | 上下左右すべて | margin: 20px; |
| 2つ | 上下、左右 | margin: 10px 0; |
| 3つ | 上、左右、下 | margin: 20px auto 30px; |
| 4つ | 上、右、下、左 | margin: 10px 20px 30px 40px; |
marginは、要素の外側にスペースを作るため、背景色はmargin部分には広がりません。背景色が広がるのは、content、padding、borderの範囲です。
ファイル名： Lesson15-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部余白の基本</title>
<style>
body {
font-family: sans-serif;
background-color: #FAFAFA;
}
.notice {
background-color: #FFEBEE;
border: solid 1px #D32F2F;
width: 280px;
padding: 14px;
margin: 12px 0;
line-height: 1.7;
}
</style>
</head>
<body>
<div class="notice">
重要なお知らせです。上下にmarginを指定して、前後の要素と間隔を空けています。
</div>
<div class="notice">
こちらは2つ目のお知らせです。要素同士の間に余白があるため、読みやすくなります。
</div>
</body>
</html>ブラウザの表示例
この例では、noticeクラスにmargin: 12px 0;を指定しています。上下の外部余白が12px、左右の外部余白が0になります。
2つのnoticeが縦に並んでいますが、marginによって要素同士の間にスペースができます。もしmarginがなければ、2つのボックスが近づきすぎて、窮屈な印象になります。
要素同士の間隔を整えると、情報のまとまりが分かりやすくなります。特に、お知らせ、記事一覧、カード、メニューなどでは、marginをうまく使うことで読みやすい配置になります。
marginを個別に指定する
marginも、paddingと同じように上下左右を個別に指定できます。
marginの個別指定
| CSS | 指定する場所 |
|---|---|
| margin-top | 上の外部余白 |
| margin-right | 右の外部余白 |
| margin-bottom | 下の外部余白 |
| margin-left | 左の外部余白 |
たとえば、見出しの下だけ余白を広げたい場合はmargin-bottomを使います。ボックスの上だけ余白を空けたい場合はmargin-topを使います。
h3 {
margin-bottom: 16px;
}この指定では、h3の下側に16pxの外部余白ができます。見出しと本文の間隔を調整したいときに使いやすい指定です。
マージンの相殺を理解する
marginには、少し注意が必要な動きがあります。それがマージンの相殺です。
縦方向に並んだ要素同士のmarginは、単純に足し算されないことがあります。隣り合う要素の上下のmarginが重なった場合、大きいほうのmarginだけが適用されることがあります。
たとえば、上の要素にmargin-bottom: 30px;、下の要素にmargin-top: 10px;が指定されている場合、間隔は40pxではなく30pxになることがあります。これがマージンの相殺です。
マージンの相殺の例
| 上の要素の下margin | 下の要素の上margin | 実際の間隔 |
|---|---|---|
| 30px | 10px | 30px |
| 20px | 20px | 20px |
| 10px | 40px | 40px |
マージンの相殺は、主に縦方向のmarginで起こります。横方向のmarginでは通常このような相殺は起こりません。
この動きを知らないと、marginを指定したのに思ったより間隔が広がらない、と感じることがあります。縦方向の余白を調整するときは、上下どちらの要素にmarginを付けるかを決めておくと管理しやすくなります。
marginで要素を中央に配置する
marginは、外側の余白を作るだけでなく、要素を中央に配置するときにも使えます。幅を指定したブロック要素に対して、左右のmarginをautoにすると、水平中央に配置できます。
.center-box {
width: 240px;
margin: 20px auto;
}この指定では、上下に20pxの外部余白を作り、左右の余白を自動調整します。その結果、要素が中央に配置されます。
ファイル名： Lesson15-4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>マージン相殺と中央配置</title>
<style>
body {
font-family: sans-serif;
background-color: #FAFAFA;
}
.box-a {
background-color: #E3F2FD;
width: 220px;
margin: 30px 0;
padding: 10px;
box-sizing: border-box;
}
.box-b {
background-color: #C5CAE9;
width: 220px;
margin: 10px 0;
padding: 10px;
box-sizing: border-box;
}
.center-box {
background-color: #FFF9C4;
border: solid 2px #FBC02D;
width: 220px;
margin: 24px auto;
padding: 12px;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<div class="box-a">上と下に30pxのmarginを指定したボックスです。</div>
<div class="box-b">上と下に10pxのmarginを指定したボックスです。</div>
<div class="center-box">
左右のmarginをautoにすると、幅を指定した要素を中央に配置できます。
</div>
</body>
</html>ブラウザの表示例
このHTMLでは、box-aとbox-bの間にマージンの相殺が関係します。box-aには上下30px、box-bには上下10pxのmarginが指定されています。縦に隣り合うmarginは重なるため、2つのボックスの間隔は30pxとして扱われます。
また、center-boxではmargin: 24px auto;を指定しています。上下には24pxの余白を作り、左右はautoにしています。center-boxにはwidth: 220px;が指定されているため、左右の余白が自動で調整され、ボックスが中央に配置されます。
中央配置をしたい場合は、widthとmargin: auto;を組み合わせるのが基本です。widthが指定されていないと、ブロック要素は横幅いっぱいに広がるため、中央に寄せても見た目の変化が分かりにくくなります。
ボックスモデルで余白の位置を理解する
CSSの余白を正しく理解するには、ボックスモデルを知っておくことが大切です。HTMLの要素は、content、padding、border、marginという領域を持っています。
ボックスモデルの構造
| 領域 | 説明 |
|---|---|
| content | 文字や画像などの中身 |
| padding | contentの外側にある内部余白 |
| border | paddingの外側にある枠線 |
| margin | borderの外側にある外部余白 |
widthとheightは、初期状態ではcontentの大きさを指定します。つまり、paddingやborderはwidthやheightの外側に追加されます。
ボックスモデルでの余白の位置づけ
width/height と余白・枠線の関係
ボックスモデルの図解
たとえば、次のような指定があるとします。
.box {
width: 400px;
padding: 20px;
border: solid 10px #333333;
}この場合、実際に表示される横幅は次のように計算されます。
| 項目 | 値 |
|---|---|
| contentの横幅 | 400px |
| 左右のpadding | 20px + 20px = 40px |
| 左右のborder | 10px + 10px = 20px |
| 実際の横幅 | 460px |
このように、widthだけを見ると400pxですが、paddingとborderを含めると実際には460pxになります。marginは要素の外側の余白なので、要素そのものの横幅には含まれません。ただし、ページ上で占有するスペースを考えるときにはmarginも意識する必要があります。
図3：ボックスモデルで見るpaddingとmarginの位置
この図から分かること
ボックスモデルでは、中心にcontentがあり、その外側にpadding、border、marginが配置されます。paddingは要素の内側、marginは要素の外側です。widthは基本的にcontentの幅を指定するため、paddingやborderを追加すると、実際に表示されるサイズは大きくなります。
box-sizingでサイズ計算を分かりやすくする
paddingやborderを指定すると、実際の表示サイズがwidthより大きくなることがあります。これを分かりやすく扱うためによく使われるのがbox-sizingです。
box-sizingの主な値
| 指定 | サイズ計算 |
|---|---|
| box-sizing: content-box; | widthはcontentだけの幅になる |
| box-sizing: border-box; | widthにpaddingとborderも含める |
初期状態では、多くの要素がcontent-boxとして扱われます。この場合、widthにpaddingとborderが追加されて実寸が大きくなります。
一方、border-boxを指定すると、paddingとborderを含めて指定したwidthに収めてくれます。
.box {
width: 400px;
padding: 20px;
border: solid 10px #333333;
box-sizing: border-box;
}この指定では、実際の横幅は400pxのままです。paddingとborderが400pxの内側に含まれるため、レイアウトの計算がしやすくなります。
カードやボックスを横に並べるレイアウトでは、box-sizing: border-box;を使うと、幅のズレを防ぎやすくなります。
余白指定でよく使うプロパティ
ここまでに登場した余白やサイズに関するCSSを整理しておきます。
| 種類 | 記述例 | 説明 |
|---|---|---|
| padding | padding: 20px 10px; | 内部余白をまとめて指定する |
| padding-top | padding-top: 30px; | 上の内部余白を指定する |
| padding-right | padding-right: 10px; | 右の内部余白を指定する |
| padding-bottom | padding-bottom: 8px; | 下の内部余白を指定する |
| padding-left | padding-left: 24px; | 左の内部余白を指定する |
| margin | margin: 20px auto; | 外部余白をまとめて指定する |
| margin-top | margin-top: 30px; | 上の外部余白を指定する |
| margin-right | margin-right: auto; | 右の外部余白を指定する |
| margin-bottom | margin-bottom: 16px; | 下の外部余白を指定する |
| margin-left | margin-left: auto; | 左の外部余白を指定する |
| width | width: 300px; | contentの横幅を指定する |
| height | height: 200px; | contentの高さを指定する |
| border | border: solid 2px #333333; | 枠線を指定する |
| box-sizing | box-sizing: border-box; | サイズ計算の方法を指定する |
paddingとmarginは、どちらも余白を作るためのCSSですが、役割が違います。paddingは要素の内側にゆとりを作り、marginは要素の外側に間隔を作ります。
この2つを使い分けられるようになると、Webページの見た目をかなり整えやすくなります。文章を読みやすくしたいときはpadding、要素同士の距離を調整したいときはmargin、というように目的に合わせて考えると分かりやすくなります。
使用タグ一覧と解説
この学習で登場した主なHTMLタグを整理しておきます。
| タグ | 用途 | 主な属性 |
|---|---|---|
| <html> | HTML文書全体を表す | lang |
| <head> | 文字コードやタイトルなどの情報を書く | なし |
| <meta> | 文字コードを指定する | charset |
| <title> | ブラウザのタブに表示されるタイトルを指定する | なし |
| <style> | HTML内にCSSを書く | なし |
| <body> | ブラウザに表示される内容を書く | なし |
| <div> | 汎用的なまとまりを作る | class |
| <p> | 段落を表す | class |
divは、ボックスやカードのようなまとまりを作るときによく使います。classを付けることで、特定のdivだけにCSSを適用できます。
pは文章の段落を表すタグです。段落にもpaddingやmarginを指定できるため、本文の読みやすさを調整するときに役立ちます。
styleは、HTMLファイルの中にCSSを書くためのタグです。学習用の短いサンプルでは、styleを使うとHTMLとCSSの関係を確認しやすくなります。
余白を指定するときに意識したいこと
余白は、広ければよいというものではありません。広すぎると情報同士の関係が分かりにくくなり、狭すぎると窮屈で読みにくくなります。大切なのは、内容のまとまりに合わせて適切な余白を作ることです。
文章を読みやすくしたいときは、文字の周囲にpaddingを入れます。ボックス同士の間隔を整えたいときはmarginを使います。ページ全体を中央に寄せたいときは、幅を指定したうえで左右のmarginをautoにします。
また、width、padding、borderを組み合わせると、実際の表示サイズが思ったより大きくなることがあります。サイズのズレを防ぎたい場合は、box-sizing: border-box;を使うと扱いやすくなります。
余白の指定は、見た目の調整だけでなく、読みやすさや情報整理にも直結します。paddingとmarginの違いを理解し、必要な場所に適切な余白を入れることで、すっきりとした分かりやすいWebページを作れるようになります。