Day5：模写してみよう！…の続き

今回も模写演習

• 一から完成見本と同じような見た目を作る
• まずは構造（HTML）、つぎにスタイル（CSS）
• 「どんなタグ・プロパティを使っているか？」を考える

👉 レイアウト構成のヒント

演習ヒント２

• 共通のクラス「wrapper」を使ってみよう
  →.wrapper{ width: 800px; margin: 0 auto; }


• 横並びにしよう
  →display: flex;
  • 水平方向を揃える
    →align-items: center;
  • 垂直方向を揃える
    →justify-content: center; ／ justify-content: space-between;
  • 横並びにしたものを、隙間を指定しよう
    →gap: 20px;


• 検証ツールを活用しよう
  →検証ツールでプロパティをいじると、それが反映される！

発展タスク

• スマホ画面でも見やすいデザインに調整
  

  👉 完成見本（SP）を開く



• 実際に数値をみながら、コーディング
  

  👉 完成見本（Figma）を開く



• もっとむずかしいデザインに挑戦！
  

  👉 完成見本２（Figma）を開く

ふりかえり

• 5日間でどんなスキルが身についた？
• Web制作のどこが楽しかった？
• もっと作ってみたい！を大切に

🎉 みなさん、おつかれさまでした！

👉 完成版はこちら