余白ってなに？marginとpaddingでレイアウトに挑戦【ど素人日記第4回】

ど素人がコードを学ぶも第4話になりました。

今回は、CSSで「余白＝スペース」を調整してみました。

🤔 文字が詰まってるような
💡 そこで「余白」をつかう
📄 実際に書いてみたコード
😳 実際の見た目に感動した
❌ またもやミスが！
✅ 今日の学びまとめ
1. 🔜 次回予告
✨関連リンク（内部リンク）

🤔 文字が詰まってるような

前回、文字に色や背景をつけたましたが、文字が詰まっているように見えます。

このような感じです↓

💡 そこで「余白」をつかう

CSSでは、余白を調整するプロパティが2種類あります。

プロパティ	何が変わる？	たとえ
`padding`	中身と枠の間のスペース	着ている洋服と人とのの隙間？
`margin`	外のものとの距離	人と他人との距離感？

📄 実際に書いてみたコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>余白の練習</title>
  <style>
    h1 {
      background-color: lightblue;
      padding: 20px;
      margin-bottom: 30px;
    }
    p {
      background-color: #eee;
      padding: 15px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <h1>こんにちは、余白</h1>
  <p>paddingとmarginを使ってみました。</p>
</body>
</html>

😳 実際の見た目に感動した

padding で文字のまわりがふんわり広くなる
margin でh1とpの間にいい感じの距離ができる

❌ またもやミスが！

padding 10px ← やりがちな「；」を打つの忘れていた

でも、VSCodeが色でヒントくれるから助かった！

✅ 今日の学びまとめ

書き方	効果
`padding: 20px;`	中の文字と枠の間にスペースを作る
`margin: 30px;`	他の要素との距離をあける
`margin-bottom: 10px;`	下だけ余白を作ることができる

CSSは、文字に色つけるだけと思っていましたが、余白でこんなに見やすくなるとは感動しました。

ページ全体の雰囲気作りは、細かい間が作っているのだなという学びをえました。