Module 01

HTML / CSS 基礎

課題に進む → 学ぶことを確認
ゴールHTML/CSSのみでPC3列・SP1列のカードUIを実装
必須スキルセマンティックタグ / Flexbox / 余白・タイポ設計 / メディアクエリ
納品物コード + スクリーンショット

✏️ 学ぶこと

基礎を面で押さえる

HTML基礎

  • 文書構造（html / head / body）
  • セマンティックタグ：header / main / section / article / footer
  • 基本要素：h1〜h6, p, ul/li, a, img, button
  • フォーム：input / label / textarea / button

CSS基礎

  • セレクタとプロパティ
  • display: block / inline / flex
  • Flexboxで整列・中央寄せ
  • 余白（margin / padding）、サイズ（width / height）
  • 色・背景・枠線・フォントサイズ
  • position: relative / absolute
  • :hover など疑似クラス

レスポンシブ

  • media queryの書き方
  • 画面幅に応じた列数切替

開発スキル

  • Chrome DevToolsで要素/スタイル確認
  • 崩れの切り分け（レイアウト・余白・サイズ）

📝 課題：プロフィールカード一覧

HTML / CSSのみで実装

完成イメージ

完成イメージ
PC: 3列 SP: 1列 Flexbox

必要ファイル

HTML, CSS基礎 (受講者用) 回答サンプル

🎯 デザイン要件

必ず満たす

レイアウト

  • カードは横並び（PC 3列）
  • カード間に十分な余白をとる
  • SP表示時は1列に切り替え

ビジュアル

  • カードに枠線または影
  • ボタンにhover時のスタイル変化
  • テキストの可読性と余白バランスを確保

制約

  • HTML / CSSのみ（JavaScript禁止）
  • Flexboxでレイアウト構築

✅ 完了条件 / セルフチェック

提出前に確認

機能・表示

  • 指定UIをHTML/CSSのみで再現
  • PC表示で崩れなし
  • SP表示で1列レイアウト
  • カードが均等配置
  • ボタンのhover効果

コード品質

  • セマンティックなHTML構造
  • 不要なdivネストがない
  • CSSが過度に冗長でない

理解して説明できること

  • Flexboxを選んだ理由
  • HTML構造の意図
  • 余白やサイズ設計の考え方

🆘 詰まったら

質問テンプレ付き

解決の手順

  1. エラー内容を確認
  2. 該当箇所を特定
  3. 公式ドキュメントを確認
  4. サンプルと比較
  5. それでも無理なら質問

質問するときに書くこと

  • やりたいこと
  • 現在の状況
  • エラー内容
  • 試したこと
  • わからない点

📚 参考サイト

動画 & 記事
YouTube 再生リスト Udemy: Web開発入門完全攻略コース HTML5 入れ子チートシート