余白を指定したい!CSSのpaddingの使い方【初心者向け】

CSSで書く【padding】の使い方・書き方についての解説スタイルを調整する際に余白を指定すると思いますが、その際にpaddingを使います。とても利用するので初心者の方でも覚えておくと良いでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

CSSで書くpaddingについて解説しています。

そもそもpaddingとは何なのかよく分からないという方でも分かるように細かく説明しています。実際に書いてみた事例も紹介しているので、参考にしてみてください。

そもそもCSSとは何か分からないという方はこちらをご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

20160620

 

田島メンター!よくサイト上に画像とか四角い図形の上に文字書いてあるじゃないですかー!?

 

20163020-2

 

うん、あるね〜!

 

20160620

 

あれを自分でもやってみて、文字の位置をずらしたいんですけど、どうしたら良いんですか〜?

 

20163020-2

 

要素の中で上下左右に余白を作るには「padding」というプロパティを使うんだけど、使い方説明するね!

 

20160620

 

わぁ〜ありがとうございますっ!

 

 

paddingとは

paddingはborderで指定された境界とその中のコンテンツの間の余白を設定するプロパティです。marginがborderの外側の余白なのに対して、paddingはborderの内側の余白となります。

pad_p_0

paddingの書き方

paddingプロパティは以下のように設定します。

padding: 余白の値;

余白の値はpxなどの数値の他に、%でも指定することができます。
値は1つから4つまで指定する方法があり、それぞれによって上下左右のどの部分を設定するかが異なります。

1つだけ設定した場合:上下左右すべてに指定した数値の余白ができます。
2つ設定した場合:1つめの数値が上下に、2つめの数値が左右に適用されます。
3つ設定した場合:1つめの数値が上に、2つめの数値が左右に、3つめの数値が下に適用されます。
4つ設定した場合:1つめの数値が上になり、次に右、下、左と時計回りの順番で適用されます。

 


 

20163020-2

 

3つ指定や4つ指定はいきなりだと大変だから、まずは1つずつ書いていこうね!

 

20160620

 

わかりました〜!

 

20163020-2

 

左から◯◯pxだけ余白を作るってこともできるから以下で見ていくね!

 

 

以下のように設定した境界の中にpaddingを適用します。(※htmlとcssが同じディレクトリ内にあり、cssのファイル名が”padding.css”である場合の例です)

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="padding.css" type="text/css">
  </head>
  <body>
    <p class="content1">
      値を1つだけ(20px)指定した場合:上下左右に20pxの余白
    </p>
    <p class="content2">
      値を2つ(10px 50px)指定した場合:上下に最初の値10px・左右に次の値50pxの余白
    </p>
    <p class="content3">
      値を3つ(10px 40px 30px)指定した場合:ひとつめの値10pxが上に・ふたつめの値40pxが左右に・最後の値30pxが下に
    </p>
    <p class="content4">
      値を4つ(70px 10px 20px 30px)指定した場合:ひとつめの値が上に・ふたつめから時計回りに指定した値の余白
    </p>
  </body>
</html>

css

p.content1 {
  width:350px;
  background-color: #87cefa; border-style: solid; border-color: #191970;
  padding: 20px;
}
p.content2 {
  width:350px;
  background-color: #87cefa; border-style: solid; border-color: #191970;
  padding: 10px 50px;
}
p.content3 {
  width:350px;
  background-color: #87cefa; border-style: solid; border-color: #191970;
  padding: 10px 40px 30px;
}
p.content4 {
  width:350px;
  background-color: #87cefa; border-style: solid; border-color: #191970;
  padding: 70px 10px 20px 30px;
}

画面ではこのように表示されます。

pad_p_2

値を1つだけ設定したcontent1では上下左右全てに20pxの分の余白が追加されています。

pad_p_2_1

値を2つ設定したcontent2では最初の10pxが上下に、次の50pxが左右に追加されています。

pad_p_2_2

値を3つ設定したcontent3では最初の10pxが上、次の40pxが左右、最後の30pxが下に追加されています。

 pad_p_2_3

値を4つ設定したcontent4では最初の70pxが上に追加され、続いて右→下→左にそれぞれの数値分の余白が追加されています。

pad_p_2_4

これらはすべてwidthを350pxに設定していますが、標準準拠モードではwidthやheightの数値内にpaddingを含まないためpaddingで設定した余白の分縦幅や横幅が大きくなっています。

 

特定の部分だけにpaddingを設定する

padding-top,padding-bottom,padding-left,padding-rightプロパティを使用することによってそれぞれ指定した部分にのみ余白を設定することが可能です。以下の場合はpadding-topで上の部分だけに40pxの余白を設定しています。

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="padding.css" type="text/css">
  </head>
  <body>
    <p class="content1">
      上だけにpaddingを40px設定した場合
    </p>
  </body>
</html>

css

p.content1 {
  width:350px;
  background-color: #87cefa; border-style: solid; border-color: #191970;
  padding-top: 40px;
}

画面ではこのように表示されます。同様にpadding-bottomの場合は下側、padding-leftでは左側、padding-rightでは右側の余白を設定することができます。

pad_p_3r

 

以上、CSSで書くpaddingの使い方について解説しました。

適当に覚えてしまうと思い通りのレイアウトにならない場合が多いので、しっかり理解して書けるようにしておくと良いでしょう。

paddingと同様に余白を作るmarginの書き方も紹介しているので、違いを理解しておきましょう。

 

20160620

 

marginとpaddingを区別するの大変そうですね・・・。

 

20163020-2

 

そうだねぇ、marginは要素同士の間隔だからね〜!

 

20160620

 

どうしたら覚えられますか?

 

20163020-2

 

・・・う〜ん、最初はいろいろ書きながら実際にどうなったのか確認してみると良いと思うよ!

 

20160620

 

わかりました!ありがとうございます♪

 

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分の考えたデザインを実現しましょう!