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の基礎解説をしていくッピ!

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

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

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

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

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

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

アイカ
アイカ

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

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