0. この時間の目標を確認しよう

After

1. HTMLは四角いブロックでできていることを知る

Apple

わたくしが作成した拡張機能を使って、HTMLが四角いブロックの集まりでできていることを見てみましょう！

（視覚的に）HTMLは、それぞれ四角いブロックでできています！

<aside> 📝 練習 色の塗られ方に着目してみましょう！

</aside>

2. 四角いブロックの幅と高さを指定する

<img src="images/stamp18.png" alt="" class="photo">

.photo{
	width: 148px;
  height: 128px;
}

※画像の大きさを変更するなどして、widthとheightを試してみましょう！

3. ブロックの外側・内側の余白設定をしてみる

marginとpaddingの違い

marginとpaddingの書き方

margin-left:40px;
padding-top:24px;

marginとpaddingの理解をするのは正直難しいので、まずは「余白空けられたー、わーい！」くらいに思っておきましょう！

一応、以下の違いがあります！

• marginを指定すると、指定したHTMLタグに塗られた背景色は適用されない
• paddingを適用すると、指定したHTMLタグに塗られた背景色は適用される
• marginは、例外的な動きをするパターンがいくつか存在する。

4. 中央揃えと中央配置

CSSでレイアウトをしていくと、色々なものを真ん中にしたいなぁということがよくあります！実はCSSの世界では、真ん中に何かを置く方法が色々あります！

ここでは「中央揃え」「中央配置」という2つの言葉で分けてお伝えします！！

• 中央揃え・・・四角いブロックの中にある情報を中央に揃える