CSS paddingの作り方と書き方解説

この記事では、paddingについて解説します。

結論から言うと、paddingとは要素の領域を調節するCSSプロパティの1つです。

これだけ聞いても、理解できない人が多数だとおもうので、この記事で丁寧に解説していきます。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

前提知識: marginとは?

paddingを理解するにはmarginというものについて理解する必要があるので、まず先に解説します。

marginとは、簡単に言うと「余白」のことです。雑誌、本、新聞などを想像してください。必ず紙の周りの「縁」には、余白があるはずです。この余白がCSSのmarginにあたります。

marginには、上下左右があって、それぞれ名前がついています。

  • 上余白: margin-top
  • 右余白: margin-right
  • 下余白: margin-bottom
  • 左余白: margin-left

簡単ですね。

paddingとmarginは下記のアプリで試して実際に見ることが出来ます。

ここまで理解できたら、いよいよpaddingの話に戻ります。

paddingとは?

paddingとは、要素やコンテンツの領域を調節するものです。

例えば、コンテンツ部分の背景色を変えたい時、paddingを使うとその背景部分の大きさを調節出来ます。

図からもわかるように、紫の部分がコンテンツです。そして、marginpaddingの外側にあります。

paddingの使い方と書き方

paddingを使うには2種類の方法があります。

  1. 上下左右別々に値を設定する
  2. paddingを使って上下左右一括で設定する

上下左右別々に値を設定する

paddingにもmarginと同じように、「top、right、bottom、left」の4種類があります。

  • 上: padding-top
  • 右: padding-right
  • 下: padding-bottom
  • 左: padding-left

これらを使った実際に書き方は、下記のようになります。

〇〇 {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

「10px」の部分には、「1em」や「10%」など様々な値と単位を使うことが出来ます。

使える単位をざっと紹介します。

  • px: ピクセル値。1画素のサイズ単位で決められます。
  • %: 親要素を基準にした大きさを割合で指定できます。
  • em: 文字サイズを基準にした大きさを指定できます。
  • rem: html要素での文字サイズを基準にした大きさを指定できます。
  • etc…

paddingを使って上下左右一括で設定する

paddingを一括で設定する方法です。個別で設定するよりも、書く量が少なくなりスッキリするので、こちらの方が好んで使われます。

paddingを使う時の注意点が、値を設定する個数によりpaddingを設定する場所が異なる事です。

  • 値が1つの場合: 上下左右のすべてが同じ大きさになる
  • 値が2つの場合: 1つ目の値が上下に、2つ目の値が左右の大きさになる
  • 値が3つの場合: 1つ目の値が上に、2つ目の値が左右、3つ目の値が下の大きさになる
  • 値が4つの場合: 1つ目の値が上に、2つ目の値が右、3つ目の値が下、4つ目の値が左の大きさになる
.element1 {
  /* 1. すべてが10pxになる */
  padding: 10px;

  /* 2. 上下が10px、左右が20pxになる */
  padding: 10px 20px;

  /* 3. 上が10px、左右が20px、下が30pxになる */
  padding: 10px 20px 30px;

  /* 4. 上が10px、右が20px、下が30px、左が40pxになる */
  padding: 10px 20px 30px 40px;
}
注意

上記の例では、サンプル紹介のため1つの要素の対してpaddingを4回設定していますが、通常は1回で大丈夫です。むしろ、ソースコードが増え、開発者がコードの内容を把握しにくくなるので、やらないでください。

paddingはインライン要素でも使うことが出来る

HTMLはブロック要素とインライン要素の2種類に分けられます。簡単に言うと、インライン要素は文章中の1部分、ブロック要素がそれ以外の要素という具合です。

インライン要素は文章中の一部分なので、marginで余白を設定することが出来ません。ところが、paddingは要素の領域を広げるものなので、使うことが出来ます。

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ