SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.06.08
  • CATEGORY
TITLE

【CSS】paddingプロパティでの指定方法を学ぼう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】paddingプロパティでの指定方法を学ぼう!
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • paddingの使い方について学びたい方へ
  • 今回はpaddingの指定方法についての記事になります
paddingの指定方法例

上の図のように、paddingプロパティを指定し要素のボックスに余白をつけています。
「paddingの指定あり」の方が、読みやすくなります。

要素のボックスモデルについて

要素のボックスモデルについて

ボックスモデルとは要素のもつ領域になります。

各領域の解説
  • 要素の内容
    要素の内容が表示される領域になります。
    widthやheightプロパティでのサイズ指定が可能です
  • padding(パディング)
    要素の内側の余白を取るための領域になります。
    paddingプロパティでの指定が可能です
  • border(ボーダー)
    要素の枠線になります。
    border-widthプロパティでのサイズ指定が可能です
  • margin(マージン)
    外側の余白の領域になります。
    marginプロパティでのサイズ指定が可能です
marginとpaddingの違い
  • margin要素の外側の余白 
    解説記事あります
  • padding要素の内側の余白 
    今回はココを解説します

ポイント!
ボックスモデルとは4つの領域で構成されることになります。
CSSでレイアウトをする際には、ボックスモデルを理解しておきましょう!

paddingについて

paddingについ

paddingプロパティは、要素の内側の余白を指定します。
paddingプロパティはそれぞれ上「-top」、右「-right」、下「-bottom」、左「-left」の余白を指定することが
できます。

padding指定方向
 /*--上の余白 「-top」--*/
padding-top: 値;

 /*--右の余白 「-right」--*/
padding-right: 値;

 /*--下の余白 「-bottom」--*/
padding-bottom: 値;

 /*--左の余白 「-left」--*/
padding-left: 値;

padding指定方法

ホームページ制作、ロゴ制作など、
デザインをする際には配色は欠かせない要素の
1つになってきますよね。

<div class="area">
<p>ホームページ制作、ロゴ制作など、
デザインをする際には配色は欠かせない要素の
1つになってきますよね。</p>
</div>
.child02 {
	 /*--padding、背景色以外 省略--*/
	background-color: #FFBF4B;
	padding-top: 30px;
	padding-left: 30px;
	padding-bottom: 30px;
	padding-right: 30px;
}
padding内訳

上下左右に30pxを指定しています。
ですが、毎回「top、bottom、left、right」を指定するの面倒ですよね。そこでショートハンドを使用します。

ショートハンドプロパティで一括指定

paddingプロパティは、上下左右の4方向をまとめて指定できます。
ショートハンドプロパティで一括指定は主に4パターンに分けられます。

4方向まとめて指定

4方向まとめて指定

値を1つ指定:
上右下左の4方向が同じ値が適用されます。

 /*--上右下左--*/
padding: 20px;

/*--
内訳
padding-top: 20px
padding-right: 20px
padding-bottom: 20px
padding-left: 20px
--*/

上下と左右を指定

上下と左右を指定

値を2つ指定:
1つ目の値が上下、2つ目の値が左右に適用されます。

 /*--1つ目の値が上下、2つ目の値が左右-*/
padding: 20px 10px;

/*--
内訳
padding-top: 20px
padding-right: 10px
padding-bottom: 20px
padding-left: 10px
--*/

上、左右、下を指定

上、左右、下を指定

値を3つ指定:
1つ目の値が上、2つ目の値が左右、3つ目の値が下に適用されます。

 /*--1つ目の値が上、2つ目の値が左右、3つ目の値が下-*/
padding: 20px 10px 30px;

/*--
内訳
padding-top: 20px
padding-right: 10px
padding-bottom: 30px
padding-left: 10px
--*/

上、右、下、左を指定

上、右、下、左を指定

値を4つ指定:
時計回りのように上、右、下、左の順で適用されます。

 /*--上、右、下、左の順番-*/
padding: 20px 10px 30px 40px;

/*--
内訳
padding-top: 20px
padding-right: 10px
padding-bottom: 30px
padding-left: 40px
--*/

ポイント!
ショートハンドで指定する際には半角スペースで区切るようにしましょう!

paddingの指定できる値について

paddingの指定できる値について

これまでpaddingの指定は「px」でおこないましたが、「%」といった単位も指定できます。

指定できる値
  • 数値と単位
    ○○pxのように数値と単位で余白を指定できます
  • %
    親要素のブロックに対する割合を%で指定できます

見出しにpaddingを指定する

見出しにpaddingを指定する

見出しに、背景色やボーダーを指定することはよくあります。
適用前:文字に対して、背景色、ボーダーに余白がなく読みにくですよね。
適用後:文字に対して、背景色、ボーダーに余白があり読みやすいですよね。

見出しにpadding

paddingプロパティでの指定方法を学ぼう!

<h3>paddingプロパティでの指定方法を学ぼう!</h3>
h3 {
	 /*--padding以外 省略--*/
	 padding: 30px;
	 
	 
	/*--
	内訳
	padding-top: 30px
	padding-right: 30px
	padding-bottom: 30px
	padding-left: 30px
	--*/
}

テーブルにpaddingを指定する

テーブルにpaddingを指定する

テーブルには必ずpaddingを指定しましょう。
適用前:見出し、セル内のテキストに余白がなく読みにくですよね。
適用後:見出し、セル内のテキストに余白があり読みやすいですよね。

テーブルにpadding

見出し見出し
テキストテキスト
テキストテキスト
<table>
	<tbody>
		<tr>
			<th>見出し</th>
			<th>見出し</th>
		</tr>
		<tr>
			<td>テキスト</td>
			<td>テキスト</td>
		</tr>
   <!--省略-->
	</tbody>
</table>
table th, 
table td {
	padding: 20px 0;

	/*--
	内訳
	padding-top: 20px
	padding-right: 0px
	padding-bottom: 20px
	padding-left: 0px
	--*/
}

%での指定方法

%での指定方法

親要素のブロックに対する割合を%で指定できます。
例:親要素の横幅が1000pxのときに、要素の内容を60%=600pxになり、
padding10%=100pxになります。またmarginを10%にすると、余白は100pxになります。

paddingでは相殺は

以前の記事「【CSS】marginが効かない!marginの相殺とは」について解説しましたが、相殺の現象が起こるのはmarginだけです。paddingに関しては相殺の現象は起こりません。
また、paddingとmargin間でも相殺は起こりません。

まとめ

今回はこれで以上です。

marginに関する記事

marginには「marginの相殺」という現象があります。

margin・paddingが効かない原因はブロック要素とインライン要素にあります。

POINT
  • 文章、コンテンツには余白が必ず必要になってきます。
  • ボックスモデルとは4つの領域で構成されることになります。
  • margin要素の外側の余白になります。
  • padding要素の内側の余白になります。
  • ショートハンドで指定する際には半角スペースで区切るようにしましょう。
  • paddingに関しては相殺の現象は起こりません。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top