CSS コース
1 2 3 4 5 6
自由課題：デザインをリニューアルしよう
⏱ 約25分 やってみよう 1 クイズ 1
📖 導入
HTML コースで作ったページに CSS を当てて、見た目をリニューアルしましょう！
同じ HTML でも、CSS を変えるだけでまったく違う印象になります。自分が「いいな」と思うデザインを目指してみましょう。
🎨 デザインテーマを決めよう
まず「どんなデザインにしたいか」を一言で決めてから作り始めましょう。
例：シンプルで見やすい / カラフルでポップ / 落ち着いたダークトーン / かわいいパステルカラー
✅ 必須要素（2つ以上）
- ✅ 文字スタイル（
color/font-size/font-family） - ✅ 背景（
background-color/background-image） - ✅ 余白（
padding/margin） - ✅ Flexbox（
display: flex）
AIレビューを受ける
書いたコードを、Gemini か ChatGPT に見てもらおう。答えを教えてもらうのではなく、良い点と改善点を1つずつ確認する使い方だよ。
Step 1プロンプトをコピー
Step 2開いて貼り付ける
※ ChatGPTは自動で入力されるよ。Geminiは環境によって自動で入らないことがあるので、その場合は貼り付けてね。
⚠️ 名前・学校名・住所などの個人情報はAIに入力しないでね。
書いたコード以外の個人的な内容は書かないようにしよう。
保護者の方はこちらもご覧ください。
🏆 難易度別チャレンジ
★☆☆ 基本
- 文字の色・サイズ・背景色を変える
- 余白（
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 〇〇 使い方 で検索してみよう！
AIと一緒に作る
自由課題を、AIにヒントをもらいながら進めよう。完成コードはもらわず、自分の手で書くのがポイント。
Step 1プロンプトをコピー
Step 2開いて貼り付ける
※ ChatGPTは自動で入力されるよ。Geminiは環境によって自動で入らないことがあるので、その場合は貼り付けてね。
⚠️ 名前・学校名・住所などの個人情報はAIに入力しないでね。
書いたコード以外の個人的な内容は書かないようにしよう。
保護者の方はこちらもご覧ください。
📌 完成したら
ブラウザで開いて、自分が決めたデザインテーマになっているか確認しましょう。
✅ 必須要素を2つ以上使えていたら、このレッスンは完了です！
次は JavaScript コースで、ページに「動き」をつけていきます。
次は JavaScript コースで、ページに「動き」をつけていきます。
このレッスンは役に立ちましたか？
フィードバックありがとうございます！
目次