自由課題：デザインをリニューアルしよう
📖 導入
HTML コースで作ったページに CSS を当てて、見た目をリニューアルしましょう！
同じ HTML でも、CSS を変えるだけでまったく違う印象になります。自分が「いいな」と思うデザインを目指してみましょう。
🎨 デザインテーマを決めよう
まず「どんなデザインにしたいか」を一言で決めてから作り始めましょう。
例：シンプルで見やすい / カラフルでポップ / 落ち着いたダークトーン / かわいいパステルカラー
✅ 必須要素（2つ以上）
- ✅ 文字スタイル（
color/font-size/font-family） - ✅ 背景（
background-color/background-image） - ✅ 余白（
padding/margin） - ✅ Flexbox（
display: flex）
🏆 難易度別チャレンジ
★☆☆ 基本
- 文字の色・サイズ・背景色を変える
- 余白（
padding/margin）を調整して読みやすくする
★★☆ 応用
- Flexbox でナビゲーションや要素を横並びにする
border-radiusで角丸のカードデザインを作る
★★★ 挑戦
- Google フォントを使ってフォントをおしゃれにする
- メディアクエリ（
@media）でスマホでも見やすくする
🔍 ヒント
ヒントを見る（まず自分で考えてみよう）
- 文字色：
color: red; - 背景色：
background-color: #f0f0f0; - 文字サイズ：
font-size: 18px; - 余白（内側）：
padding: 16px; - 余白（外側）：
margin: 8px; - 横並び：
display: flex; - 中央揃え：
justify-content: center; - 角丸：
border-radius: 8px;
わからないプロパティは CSS 〇〇 使い方 で検索してみよう！
📌 完成したら
ブラウザで開いて、自分が決めたデザインテーマになっているか確認しましょう。
✅ 必須要素を2つ以上使えていたら、このレッスンは完了です！
次は JavaScript コースで、ページに「動き」をつけていきます。
次は JavaScript コースで、ページに「動き」をつけていきます。