余白を指定したい！CSSのpaddingの使い方【初心者向け】
CSSで書く【padding】の使い方・書き方についての解説スタイルを調整する際に余白を指定すると思いますが、その際にpaddingを使います。とても利用するので初心者の方でも覚えておくと良いでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSで書くpaddingについて解説しています。
そもそもpaddingとは何なのかよく分からないという方でも分かるように細かく説明しています。実際に書いてみた事例も紹介しているので、参考にしてみてください。
そもそもCSSとは何か分からないという方はこちらをご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
田島メンター！よくサイト上に画像とか四角い図形の上に文字書いてあるじゃないですかー！？
うん、あるね〜！
あれを自分でもやってみて、文字の位置をずらしたいんですけど、どうしたら良いんですか〜？
要素の中で上下左右に余白を作るには「padding」というプロパティを使うんだけど、使い方説明するね！
わぁ〜ありがとうございますっ！
paddingとは
paddingはborderで指定された境界とその中のコンテンツの間の余白を設定するプロパティです。marginがborderの外側の余白なのに対して、paddingはborderの内側の余白となります。
paddingの書き方
paddingプロパティは以下のように設定します。
padding: 余白の値;
余白の値はpxなどの数値の他に、％でも指定することができます。
値は1つから4つまで指定する方法があり、それぞれによって上下左右のどの部分を設定するかが異なります。
1つだけ設定した場合：上下左右すべてに指定した数値の余白ができます。
2つ設定した場合：1つめの数値が上下に、2つめの数値が左右に適用されます。
3つ設定した場合：1つめの数値が上に、2つめの数値が左右に、3つめの数値が下に適用されます。
4つ設定した場合：1つめの数値が上になり、次に右、下、左と時計回りの順番で適用されます。
3つ指定や4つ指定はいきなりだと大変だから、まずは1つずつ書いていこうね！
わかりました〜！
左から◯◯pxだけ余白を作るってこともできるから以下で見ていくね！
実際にpaddingを書いてみよう
以下のように設定した境界の中に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;
}
画面ではこのように表示されます。
値を1つだけ設定したcontent1では上下左右全てに20pxの分の余白が追加されています。
値を2つ設定したcontent2では最初の10pxが上下に、次の50pxが左右に追加されています。
値を3つ設定したcontent3では最初の10pxが上、次の40pxが左右、最後の30pxが下に追加されています。
値を4つ設定したcontent4では最初の70pxが上に追加され、続いて右→下→左にそれぞれの数値分の余白が追加されています。
これらはすべて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では右側の余白を設定することができます。
以上、CSSで書くpaddingの使い方について解説しました。
適当に覚えてしまうと思い通りのレイアウトにならない場合が多いので、しっかり理解して書けるようにしておくと良いでしょう。
paddingと同様に余白を作るmarginの書き方も紹介しているので、違いを理解しておきましょう。
marginとpaddingを区別するの大変そうですね・・・。
そうだねぇ、marginは要素同士の間隔だからね〜！
どうしたら覚えられますか？
・・・う〜ん、最初はいろいろ書きながら実際にどうなったのか確認してみると良いと思うよ！
わかりました！ありがとうございます♪
この記事を監修してくれた方
|
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。
小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 |
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分の考えたデザインを実現しましょう！
