Table of Contents
前回はこのようにページコンテンツ全体を線で囲むところまでCSSを書きました。
線で囲えたのはいいのですが、線の中の余白が整っていませんね。今回はこれを直していきましょう。
要素の外側の余白を調整する margin
まずは見出し（h1タグ）の上にできている余白を無くしてみましょう。
前回、ページ全体を中央に寄せるために margin というCSSプロパティを使いましたね。
この margin を使えば、ページの要素（タグで表示されるもの）の外側に付く余白を自由に変更することができます。
ページのCSSを編集する前に、前回作ったのページのHTMLソースをもう一度見ておきましょう。（コメントは除いています）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介のページ</title>
</head>
<style>
body {
width: 800px;
margin: 0 auto;
border: 1px solid black;
}
.titleHeader {
font-size: 36px;
color: white;
background-color: red;
text-align: center;
}
</style>
<body>
<h1 class="titleHeader">私の自己紹介</h1>
<h2>プロフィール画像</h2>
<img src="../images/profile.png">
<h2>基本情報</h2>
<ul>
<li>18歳</li>
<li>男性</li>
<li>東京在住</li>
</ul>
<h2>好きなもの・嫌いなもの</h2>
<table>
<tr>
<th>項目</th><th>好き</th><th>嫌い</th>
</tr>
<tr>
<td>生き物</td><td>金魚</td><td>ムカデ</td>
</tr>
<tr>
<td>食べ物</td><td>ステーキ</td><td>なすび</td>
</tr>
<tr>
<td>飲み物</td><td>リンゴジュース</td><td>青汁</td>
</tr>
<tr>
<td>季節</td><td>夏</td><td>冬</td>
</tr>
</table>
<h2>一言</h2>
<p>はじめまして！<br>
私は家野ペイジと言います。<br>
私のことをみなさんに知っていただきたかったので、<br>
このホームページを作りました。</p>
<p>これから色々な情報を発信していきたいと考えています。<br>よろしくお願いします！</p>
</body>
</html>
見直してみても、HTMLソース内には、h1タグの上部に余白をつける記述は１つもありません。なのに何故、h1タグの上部に奇妙な空白が発生しているのでしょうか？
実は、この余白はブラウザが人間にとって情報を読みやすいように勝手につけてくれているのです。h1タグやh2タグがpタグに比べて大きな文字で表示されるのも、ブラウザが勝手にそうしているのです。
CSSを何もつけない場合は見やすくなるのでありがたいのですが、自分でCSSを書いてレイアウトを作りたいときに、この機能が邪魔になってしまうことがあります。
こういった場合は、このブラウザ標準のスタイルをCSSで上書きする必要があります。
次のようにCSSを書き加えてみてください。（CSS以外の部分は省略しています）
...
<style>
body {
width: 800px;
margin: 0 auto;
border: 1px solid black;
}
.titleHeader {
font-size: 36px;
color: white;
background-color: red;
text-align: center;
margin-top: 0;
}
</style>
...
margin-top というプロパティを設定し、その値を 0 にしました。これは「要素の上（top）の余白を 0 にして」という意味になります。
書き加えた後にページを見てみてください。このように余白がなくなったと思います。
見出しタグの上下には余白ができる
見出しタグ（h1〜h6）には、要素の上下にこのような余白が自動的にできます。見出しタグ周りの見栄えを自分で調節したいときは、marginプロパティに値を設定する必要があります。
marginの設定方法
先ほど、要素の上の余白を消すために margin-top というプロパティを使用しました。同様に、要素の下や左右の余白を調整するためには、以下のプロパティを使用します。
| プロパティ名 | 効果 |
|---|---|
| margin-top | 要素の上の余白を変更 |
| margin-bottom | 要素の下の余白を変更 |
| margin-left | 要素の左の余白を変更 |
| margin-right | 要素の右の余白を変更 |
また、余白を同時に複数設定する方法もありますが、必要になり次第紹介します。
要素の内側の余白を調整する padding
さて、次は左がぴったりくっ付きすぎている問題を修正しましょう。
今までは、要素の外側に付く余白を margin で調整できることを紹介しました。
margin-left を使ってbody内のタグ全てに左側余白をつけてもできなくはないですが、全ての要素にプロパティを設定するのは大変です。
こういう場合は、タグの内側に余白をつけると便利です。早速bodyタグの内側に余白を設定してみましょう。
...
<style>
body {
width: 800px;
margin: 0 auto;
border: 1px solid black;
padding: 16px;
}
.titleHeader {
font-size: 36px;
color: white;
background-color: red;
text-align: center;
margin-top: 0;
}
</style>
...
要素の内側に余白をつける場合は padding というプロパティを使います。
paddingを設定すると、このようにページ全体に余白が現れます。これで、要素一つひとつに margin を設定しなくても、ページ内に余白を設定することができました。
padding も margin と同様に、方向別に余白を設定できます。
| プロパティ名 | 効果 |
|---|---|
| padding-top | 要素内側の上の余白を変更 |
| padding-bottom | 要素内側の下の余白を変更 |
| padding-left | 要素内側の左の余白を変更 |
| padding-right | 要素内側の右の余白を変更 |
おさらい
要素の余白について今回学んだことをおさらいをしましょう。
- タグの種類によっては、初めからスタイル（余白や文字の大きさなど）がつけられているものがあります。
- 要素の外側に余白をつけたい場合は margin を設定します。
- 要素の内側に余白をつけたい場合は padding を設定します。
今回紹介したように、タグに初めから付いているスタイルによってレイアウトの調整が難しくなる場合があります。そのため、実際に本格的なページを作る場合は、初めにCSSのリセットを行います。
CSSのリセットとは、タグについているスタイルを初めに全てなくしてしまうことです。CSSのリセットに関しては後ほど詳しく解説したいと思います。
次回は細かい部分の見た目を調整して、自己紹介ページのレイアウトを完成させましょう！