CSS入門講座｜余白について学ぼう | 学んで遊んでジャンケンポン！

この記事で学べること

記事の余白について
タグとタグのブロックの距離をとるmargin
タグの中の余白をとるpadding

アイカ

うーん・・・

ユウキ

どうしたのアイカちゃん？

アイカ

あ、ユウキくん！

実は・・・

アイカ

今、自分のサイトをつくってるんだけどね・・・

こんな風に、上のブロックと下のブロックに

何故か間が空いちゃって・・・

アイカ

これ、どうにかできないかなぁ・・・？

うさタブ

うさタブに任せるッピ！　３分で片付けるッピよ～！

アイカ

ウサタブさん！　きてくれたのねっ

ユウキ

よっしゃ、オレも一緒に勉強するぜ！

うさタブ

最終的にはこのような感じになるッピ！

一緒に学習していくッピよ～！

ウェブサイトの余白ついて学ぼう

ウェブサイトの余白ついて学ぼう

元になるコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
 color: #FFFFFF;
}

h1 {
 background: #d8bfd8;
}

.shoukai {
 background: #00ced1;
}
</style>
</head>

<body>
<h1>ハーブ紹介</h1>
<p class="shoukai">
ミントは爽やかな香りがするハーブです。<br />
虫除けの効果がある他、かゆいところに湿布すると、かゆみを軽減する効果もあります。
</p>
</body>
</html>

うさタブ

上のコードを元に学習していくッピ！

【メモ帳】にコピーして用意するッピネ！

margin でタグとタグの間の距離を詰めてみよう

うさタブ

さっそくタグとタグの間の距離を縮めてみるッピ！

こういうときは 【 margin 】 プロパティを使うッピネ～！

うさタブ

<style></style>の中にある

body以外のタグやクラスセレクタの中に、

margin: 0px;

と入力するッピよ～

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
 color: #FFFFFF;
}

h1 {
 margin: 0px;
 background: #d8bfd8;
}

.shoukai {
 margin: 0px;
 background: #00ced1;
}
</style>
</head>

<body>
<h1>ハーブ紹介</h1>
<p class="shoukai">
ミントは爽やかな香りがするハーブです。<br />
虫除けの効果がある他、かゆいところに湿布すると、かゆみを軽減する効果もあります。
</p>
</body>
</html>

アイカ

すごいわ！　余白がなくなってる！

ユウキ

こんなこともできるんだな～！

うさタブ

ふふふふ、これがプログラミングの魔法ッピよ～！

padding でタグの中に余白をつくってみよう

アイカ

あの、ウサタブさん

お願いがあるのだけど・・・

うさタブ

どうしたッピカ？

<body>
<h1>ハーブ紹介</h1>
<p class="shoukai">
ミントは爽やかな香りがするハーブです。<br />
虫除けの効果がある他、かゆいところに湿布すると、かゆみを軽減する効果もあります。
</p>
</body>

アイカ

この下の<p>の部分、もう少しゆとりが欲しいのだけど・・・

この見出し<h1>と文章<p>の間を開けずに、

文章の方だけ余白を作るってこと、できないかしら？

うさタブ

ふふふ、お安いご用ッピ！

そういうときは 【 padding 】 プロパティを使うでッピよ～

うさタブ

<style></style>の中にある【 .shoukai クラス】セレクタの中に、

 padding: 15px;

と入力するッピよ～

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
 color: #FFFFFF;
}

h1 {
 margin: 0px;
 background: #d8bfd8;
}

.shoukai {
 margin: 0px;
 padding: 15px;
 background: #00ced1;
}
</style>
</head>

<body>
<h1>ハーブ紹介</h1>
<p class="shoukai">
ミントは爽やかな香りがするハーブです。<br />
虫除けの効果がある他、かゆいところに湿布すると、かゆみを軽減する効果もあります。
</p>
</body>
</html>

ユウキ

お、良い感じじゃないか？

アイカ

これがやりたかったの！　すごいわウサタブさんっ！

padding-left で左側に余白をつけよう

ユウキ

でもこれ、

<h1>のハーブ紹介だけ左によっててなんか変じゃないか？

アイカ

確かにそうだわ・・・

なんかバランスが悪いというか・・・

これだけ左に余白をつけられないかなぁ～

うさタブ

ふふふふ、まかせるでッピよ！

そういうときは、 padding-left プロパティを使うッピ！

アイカ

padding-left プロパティ？

うさタブ

案ずるより産むがやすしッピ！

<style></style>の中にある【 h1 】セレクタの中に、

padding-left: 15px;

と追加してみるッピよ～！

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
 color: #FFFFFF;
}

h1 {
 margin: 0px;
 padding-left: 15px;
 background: #d8bfd8;
}

.shoukai {
 margin: 0px;
 padding: 15px;
 background: #00ced1;
}
</style>
</head>

<body>
<h1>ハーブ紹介</h1>
<p class="shoukai">
ミントは爽やかな香りがするハーブです。<br />
虫除けの効果がある他、かゆいところに湿布すると、かゆみを軽減する効果もあります。
</p>
</body>
</html>

アイカ

すごいっ！　カンペキだね♪

marginとpaddingの違いについて

ユウキ

なあ、margin と padding って何が違うんだ？

アイカ

確かに、イマイチ違いがわからないかなぁ～

うさタブ

そうッピネ～

説明するより図をみる方がわかりやすいかもッピ！

うさタブ

以前、HTMLはタグ同士の

積み木のようなブロックで作られてる、と説明したッピね？

うさタブ

タグとタグの距離を取るために使うのが margin

タグの中に余白をつくるのが padding といった感じッピネ！

ユウキ

なるほどなー

アイカ

勉強になったわ！

今回使ったCSSの解説

うさタブ

今回使ったタグの説明をするッピ！

bodyウェブページ全体に設定します {
color文字色を: #FFFFFF;白にします
}

うさタブ

h1見出し１に設定します {
marginタグとタグの距離は　: 0px;
padding-leftタグの中の【左】の余白は　: 15px;
background背景設定は　: #d8bfd8背景色をこの色にします;
}

うさタブ

.shoukaiクラス『shoukai』の設定を作ります {
marginタグとタグの距離は　: 0px;
paddingタグの内部の余白は　: 15px;
background背景の設定は: #00ced1;背景の色をこの色にします
}

という意味になるッピ！

padding の設定

ユウキ

思ったんだけどさ、

この『padding-left』って左側に余白つくるわけじゃん

ユウキ

左以外に余白は作れないのか？

うさタブ

よく聞いてくれたッピ！

もちろん、他の上下左右、４箇所に余白を作ることができるッピ！

うさタブ

上の余白は padding-top

下の余白は padding-bottom

左の余白は padding-left

右の余白は padding-right

ッピ！

margin の解説

アイカ

じゃあ、もしかして、marginプロパティも？

うさタブ

もちろんッピヨ！

うさタブ

上の余白は margin-top

下の余白は margin-bottom

左の余白は margin-left

右の余白は margin-right

で設定できるッピ！

ユウキ

なるほど～

アイカ

またひとつ勉強したねっ

全体のコードの確認

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
 color: #FFFFFF;
}

h1 {
 margin: 0px;
 padding-left: 15px;
 background: #d8bfd8;
}

.shoukai {
 margin: 0px;
 padding: 15px;
 background: #00ced1;
}
</style>
</head>

<body>
<h1>ハーブ紹介</h1>
<p class="shoukai">
ミントは爽やかな香りがするハーブです。<br />
虫除けの効果がある他、かゆいところに湿布すると、かゆみを軽減する効果もあります。
</p>
</body>
</html>

学習のまとめ