【6日でできるHTML＆CSS入門】パディングの使用

　ウェブページのデザインでは、要素同士の見た目の間隔やレイアウトを調整することが非常に重要です。CSS（Cascading Style Sheets）を使うことで、テキストや画像などの要素同士に「余白」を持たせて、見やすく美しいページを作ることができます。この余白には大きく分けて パディング（padding） と マージン（margin） の2つがあります。本記事では、パディングの役割と使い方について、具体例や図解を交えながら詳しく解説します。

１．パディングの基本

1.1. パディングとは何か

　パディング（padding）は、要素の内容（テキストや画像など）とボーダー（枠線）の間にできる内側の余白です。パディングを設定することで、文字や画像が枠にぴったりくっつかず、適度なスペースが生まれます。

項目	内容
padding	コンテンツとボーダーの間にできる余白
margin	要素同士の外側の余白（本記事の後半で解説）

1.2. パディングの基本サンプル

ファイル名： lesson30_1.html

<!DOCTYPE html>
<html>
<head>
  <title>パディングの基本例</title>
  <meta charset="utf-8"/>
  <style>
    h2 {
      border: 3px solid blue;
      background-color: #e0e0ff;
    }
    .with_padding {
      padding: 16px;
    }
  </style>
</head>
<body>
  <!-- パディングなし -->
  <h2>パディングなしの見出し</h2>
  <!-- パディングあり -->
  <h2 class="with_padding">パディングありの見出し</h2>
</body>
</html>

表示結果

1つ目の見出し（h2）は、文字が枠（ボーダー）に近い。
2つ目の見出し（h2）は、枠と文字の間に16pxの余白ができている。

タグ・CSSプロパティ一覧

タグ・プロパティ	解説
`<h2>`	見出し用のブロック要素
`border`	枠線を表示するCSSプロパティ
`background-color`	背景色を設定するCSSプロパティ
`padding`	内容と枠線の間の余白を設定するCSSプロパティ
`class`	要素にクラス名を付与してスタイルを分けて適用する属性

２．パディングの詳細な設定方法

2.1. 各方向ごとのパディング設定

パディングは上下左右を個別に設定できます。
以下のプロパティで指定します。

プロパティ名	意味
padding-top	上側のパディングを指定
padding-right	右側のパディングを指定
padding-bottom	下側のパディングを指定
padding-left	左側のパディングを指定

ファイル名： lesson30_2.html（左だけにパディングを設定）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
    .left_padding {
      border: 3px solid green;
      padding-left: 24px;
    }
  </style>
</head>
<body>
  <div class="left_padding">左側だけにパディングを設定しています。</div>
</body>
</html>

表示結果

2.2. 個別指定の活用例

複数の方向に異なるパディングを設定したい場合は、以下のように記述します。

padding-top: 10px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 30px;

また、paddingプロパティに複数の値をまとめて指定することもできます。

値の数	各値の適用先	記述例
1	上下左右すべて	`padding: 8px;`
2	上下／左右	`padding: 8px 20px;`
3	上／左右／下	`padding: 8px 20px 12px;`
4	上／右／下／左	`padding: 8px 20px 12px 4px;`

３．パディングとマージンの違い

　パディングとよく似たものにマージンがありますが、パディングは内側の余白、マージンは外側の余白です。

種類	場所	役割
padding	ボーダーの内側	枠内の内容と枠線の間に余白
margin	ボーダーの外側	要素間に余白を作る

ファイル名： lesson30_3.html（パディングとマージンの同時使用）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
    .box {
      border: 2px solid orange;
      padding: 12px;
      margin: 20px;
      background-color: #fffbe0;
    }
  </style>
</head>
<body>
  <div class="box">パディングとマージンを同時に使ったボックスです。</div>
</body>
</html>

表示結果

４．複数クラスの利用

　HTMLのクラス属性は、複数のクラスをスペース区切りで記述できます。これにより、1つの要素に複数のスタイルを適用できます。

ファイル名： lesson30_4.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
    .padding_10 {
      padding: 10px;
      border: 2px solid #555;
    }
    .margin_15 {
      margin: 15px;
    }
  </style>
</head>
<body>
  <p class="padding_10 margin_15">パディングとマージンを両方指定した段落です。</p>
</body>
</html>

表示結果

５．よく使うタグ・CSSプロパティ一覧

タグ・プロパティ	説明
`<div>`	汎用のブロック要素。レイアウトによく使う。
`<p>`	段落を表すブロック要素
`<h2>`, `<h1>`	見出しを表すブロック要素
`border`	要素に枠線をつける。
`padding`	内容と枠線の間に余白を作る。
`margin`	要素同士の外側に余白を作る。
`background-color`	背景色をつける。
`class`	スタイルの指定に利用するHTML属性

まとめ

　パディングは、ウェブページの見た目のバランスを整える重要なプロパティです。テキストや画像が枠線にくっつきすぎると読みにくくなりますが、パディングで適度なスペースをとることで、見やすく美しいデザインに仕上げることができます。また、マージンとの違いをしっかり理解し、目的に応じて使い分けましょう。

【6日でできるHTML＆CSS入門】パディングの使用