ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

要素の余白を調整する(padding)

余白を調整するスタイル

要素の余白を調整するには、paddingプロパティで調整幅を指定します。

p {
padding:指定する値;
}

paddingで余白を設定・調整することによりコンテンツ間に適切な余白を設けたり、文字の飾り付けやレイアウトを調整する際に重宝します。

なお、marginと違いpaddingは領域内の余白を調整します。

領域内余白の調整

例えばpやhなどの要素は、領域内の余白を調整することができます。

領域内余白の表示図

※わかりやすいように横幅を固定し、色をつけています。

この色がついた部分を「領域内余白」といいます。
領域内余白とは、その要素自身が持つ余白(上図の赤色部分)であり、「要素のエリア内の余白」を指します。

領域内余白の説明

この領域内余白を調整したい場合に、paddingを使用します。

具体的な余白の調整方法

例として、h1の余白をそれぞれ50pxに指定してみます。

[CSSの記述例]

h1 {
padding:50px;
}

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>領域内余白の調整</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<h1>h1テキスト</h1>

<p>余白の調整サンプル</p>
<p>テキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキスト</p>

</body>
</html>

[表示サンプル]
余白を広げた様子

h1要素の領域内余白がそれぞれ50px(上下左右)に調整されました。

それぞれ独立して指定する場合

さきほどは一括して余白を指定しましたが、上下左右それぞれに指定する方法もあります。

padding-top ←上の余白
padding-left ←左の余白
padding-right ←右の余白
padding-bottom ←下の余白

padding-topは上の領域内余白を、padding-leftは左の領域内余白を、padding-rightは右の領域内余白を、padding-bottomは下の領域内余白を設定する場合に使います。

例えば、左の余白だけ50pxに指定したい場合には下記のようになります。

[CSSの記述例]
h1 {
padding-left:50px;
}
[表示サンプル]
左の領域内余白を調整した図

※左の領域内余白だけ、50pxに設定されました。

同様に、右だけ指定したい場合にはpadding-rightを、下だけ指定したい場合にはpadding-bottomを記述するとOKです。

覚えておきたいポイント

間違えないように気をつけよう

paddingと似たプロパティでmarginがありますが、paddingは領域内の余白、marginは領域間の余白を指定します。
よく似た機能のプロパティですが、それぞれに担当する役割が違うので気をつけましょう。

paddingを利用する際の注意点

paddingをwidthやheightと一緒に使う場合は注意が必要です。

例えば、width(横幅)300px、height(縦幅)300px、padding10pxのスタイルを作ったとします。

[CSSサンプル]
.box {
width:300px;
height:300px;
padding:10px;
background-color:#999;
}
[表示サンプル]
注意点の説明図

当然、「横幅・縦幅共に300pxに指定したのだから、300pxで表示されているはず!」と思ってしまいますが、実は違うんです。

実際には横幅320px、縦幅320pxで表示されてしまいます。
これはなぜかというと、paddingの10pxが横幅・縦幅に加算されて表示されるからなんです。

はみ出して広がってしまう

横幅300pxに左のpaddingが10px、右のpaddingが10px。
300+10+10=320となります。

もちろん縦幅も、300pxに上のpaddingが10px、下のpaddingが10px。
300+10+10=320です。

なので、きれいに300px表示をする場合には、width:280px; height:280px;と入力しなければなりません。

[CSSの記述例]
.box {
width:280px;
height:280px;
padding:10px;
background-color:#999;
}

なんだかややこしいですが、「paddingで指定した余白」まで計算してスタイルをつくらないと、レイアウト崩れの原因となります。
※特にカラムなどを組む場合には、キッチリと計算しましょう!

覚えておきたいポイント

計算に注意しよう

300×300pxのボックスに四方が10pxのpaddingを設ける場合、widht(横幅)280px、height(縦幅)280pxと入力するようにしましょう。そのまま300pxと入力してしまうと、実際には320pxの大きさで表示されてしまいます。

直線・点線などを表示する
« 前のページへ ページの余白を調整する(margin)

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。