STEP 4：細かくデザイン（見た目の装飾）

このステップの目的

基礎レイアウトの上に、色・フォント・余白・装飾効果を当てて、「見た目のデザイン」を仕上げることを目指します。

---

checklistやることリスト

• カラーを決める：メインカラー・アクセントカラー・背景色を選定
• フォントを設定する：見出し／本文のフォントサイズ・行間・太さを指定
• 余白（マージン／パディング）を調整：ブロック間やテキスト周りの余白を均一に
• ボタンやリンクのスタイル：色・角丸・ホバー時の変化などを実装
• カードや枠の装飾：ボックスシャドウやボーダーで立体感を演出
• Hover／Transition：ボタンや画像にマウスオーバー効果を入れる

---

tips_and_updatesポイント解説

1. カラーパレット

:root {
  --color-primary:   #3498db;
  --color-accent:    #e67e22;
  --color-bg:        #f9f9f9;
  --color-text:      #333;
}
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

ポイント：:root で変数化すると、あとから色をまとめて変えやすい！

2. タイポグラフィ

h1, h2, h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  margin-bottom: 0.5em;
}
p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1em;
}

ポイント：見出しと本文でフォントファミリーやサイズに差をつけると読みやすい

3. ボタンデザイン

.btn {
  display: inline-block;
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.8em 1.2em;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}
.btn:hover {
  background-color: var(--color-accent);
}

ポイント：transition でホバー時の色変化をなめらかに

4. カード装飾

.card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 1em;
  margin-bottom: 1.5em;
}

ポイント：box-shadow で浮き上がる感じを演出

---

warningよくある間違いと対策

色をバラバラに使いすぎる

メイン・アクセント・背景の3色以内にまとめましょう。

余白が不揃い

共通の余白サイズ（例：8px, 16px, 24px）を決めると統一感が出ます。

Hover効果がない／唐突に動く

transition を使って変化をゆるやかにしましょう。

フォントサイズがバラバラ

見出し・本文のサイズをCSS変数や共通クラスで管理しましょう。

---

---