ホーム＞コース別ガイド一覧＞パディング（余白）を指定しましょう！
パディング（余白）を指定しましょう！
（padding-top、padding-bottom、padding-left、padding-right、padding プロパティ） |
   |
CSS一覧プロパティ辞典 … padding-top プロパティ
padding-top プロパティを使うと、要素の上部のパディング（余白）を広げたり狭くしたりできます。値には長さ（「px」など）、パーセンテージ（「%」）を指定できます。
CSS一覧プロパティ辞典 … padding-bottom プロパティ
padding-bottom プロパティを使うと要素の下部のパディング（余白）を広げたり狭くしたりできます。値には長さ（「px」など）、パーセンテージ（「%」）を指定できます。
CSS一覧プロパティ辞典 … padding-left プロパティ
padding-left プロパティを使うと、要素の左側のパディング（余白）を広げたり狭くしたりできます。値には長さ（「px」など）、パーセンテージ（「%」）を指定できます。
CSS一覧プロパティ辞典 … padding-right プロパティ
padding-right プロパティを使うと、要素の右側のパディング（余白）を広げたり狭くしたりできます。値には長さ（「px」など）、パーセンテージ（「%」）を指定できます。
CSS一覧プロパティ辞典 … padding プロパティ
padding プロパティを使うと、要素の上下左右のパディング（余白）をまとめて指定できます。値には余白の長さを1〜4個指定できます。
[paddingプロパティの値]
| 値 |
値の効果 |
| 長さを１個指定 |
上下左右のパディングの長さになる。
「padding: 1em;」と指定すると、上下左右のパディングが１文字分になります。 |
| 長さを２個指定 |
一つ目の値が上下、二つ目の値が左右の長さになります。
「padding: 1em 2em;」と指定すると、上下のパディングが１文字分になり、左右のパディングが２文字分になります。 |
| 長さを３個指定 |
一つ目の値が上、二つ目の値が左右、三つ目の値が下の長さになります。
「padding: 1em 2em 3em;」と指定すると、上のパディングが１文字分になり、左右のパディングが２文字分になり、下のパディングが３文字分になります。 |
| 長さを４個指定 |
一つ目の値が上、二つ目の値が右、三つ目の値が下、四つ目の値が左の長さになります。
「padding: 1em 2em 3em 4em;」と指定すると、上のパディングが１文字分になり、右のパディングが２文字分になり、下のパディングが３文字分になり、左のパディングが４文字分になります。 |
覚え方があります！
padding プロパティの値のようにCSSで上下左右を表すときは、上、右、下、左、のように時計回りになります。このことを覚えておくと値を入力するときに迷わずにすみますよ！
padding-top プロパティ、padding-bottom プロパティを使用し、h1 要素の上下のパディングを指定して背景色の付いた余白を広げましょう！なお、パディングは上下共に10pxに指定します。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
body { background-color: moccasin;}
h1 {
background-color: orange;
text-align: center;
padding-top: 10px;
paddimg-bottom: 10px;
}
span{ font-weight: bold; }
p {
line-height: 1.7em;
text-align: center;
}
p.copy { font-family: "Ｍ ＳＰ明朝",serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します！</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html> |
|
[padding-topプロパティ、padding-bottomプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[padding-topプロパティ、padding-bottomプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように h1 要素の上下のパディングを設定しその分背景色付きの余白も広がりました！
※マージンとパディングの余白の違いは「マージンとパディングの違いを知っておきましょう！」を参照してください。
表のセルにパディングを指定できます！
HTMLの属性に cellpadding 属性がありますが、CSSのパディング関連のプロパティを使用すると、上下左右それぞれのパディングを好きな長さに指定できます！
