CSS入門講座|余白ついて学ぼう

CSS
この記事で学べること
  • 記事の余白について
  • タグとタグのブロックの距離をとるmargin
  • タグの中の余白をとるpadding

アイカ
アイカ

うーん・・・

ユウキ
ユウキ

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

アイカ
アイカ

あ、ユウキくん!

実は・・・

アイカ
アイカ

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

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

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

アイカ
アイカ

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

うさタブ
うさタブ

その願い、叶えてしんぜようッピ・・・!

うさタブ
うさタブ

うさタブに任せるッピ! 3分で片付けるッピよ~!

アイカ
アイカ

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

ユウキ
ユウキ

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

うさタブ
うさタブ

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

一緒に学習していくッピよ~!

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

元になるコード

<!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の違いについて

ユウキ
ユウキ

なあ、marginpadding って何が違うんだ?

アイカ
アイカ

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

うさタブ
うさタブ

そうッピネ~

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

ウェブサイトの余白説明・margin/padding
ウェブサイトの余白
うさタブ
うさタブ

以前、HTMLはタグ同士の

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

うさタブ
うさタブ

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

ウェブサイトの余白説明・margin/padding
ウェブサイトの余白

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

ユウキ
ユウキ

なるほどなー

アイカ
アイカ

勉強になったわ!

今回使ったCSSの解説

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

うさタブ
うさタブ

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

という意味になるッピ!

padding の設定

ユウキ
ユウキ

思ったんだけどさ、

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

ユウキ
ユウキ

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

うさタブ
うさタブ

よく聞いてくれたッピ!

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

paddingの解説
paddingの解説
うさタブ
うさタブ

の余白は padding-top

の余白は padding-bottom

の余白は padding-left

の余白は padding-right

ッピ!

margin の解説

アイカ
アイカ

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

うさタブ
うさタブ

もちろんッピヨ!

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>
学習のまとめ
  • marginタグタグの距離を取る
  • margin-left, margin-right, margin-top, margin-bottom,で四方で個別に余白を作ることもできる
  • paddingタグの内部の余白を調整する
  • padding-left, padding-right, padding-top, padding-bottom,で四方で個別に余白を作ることもできる

うさタブ
うさタブ

上手くできたッピか?

これからも色んなCSSの基礎解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんな、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんなは、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

CSSCSS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました