学習ロードマップ

🎒 中学生（プログラミング初めて）

STEP 0 → 1（HTML）→ 2（CSS）→ 5（チャレンジ）の最短ルート。まずはWebページを作る楽しさを体験しよう。

📝 高校生（情報Ⅰ対策したい）

STEP 0 → 3（JavaScript）→ ドリル の集中ルート。変数・条件分岐・繰り返しを重点的に学べます。

🌐 Webサイトを作りたい人

STEP 0 → 1（HTML）→ 2（CSS）→ 6（公開）の実践ルート。最短で自分のサイトをインターネットに公開できます。

STEP 0 — 環境準備（約30分）

VS Code（無料エディタ）とGoogle Chromeをインストールします。

📖 VS Codeのインストール方法

STEP 1 — HTML基礎（7レッスン・約3.5時間）

見出し・段落・リンク・画像・リスト・表・フォームなど、Webページの骨格を作ります。

📖 HTMLとは？ · 初めてのWebページ

📚 HTML · タグ

STEP 2 — CSS基礎（6レッスン・約3時間）

色・フォント・余白・Flexbox・レスポンシブデザインでページをデザインします。

📖 CSSとは？ · Flexbox入門

📚 セレクタ · Flexbox

STEP 3 — JavaScript基礎（7レッスン・約3.5時間）

変数・条件分岐・関数・DOM操作で、ページに動きをつけます。最後はToDoアプリを作ります。

📖 JavaScriptとは？ · 変数入門

📚 変数 · 関数

STEP 4 — 問題ドリル（90問・各30分）

HTML・CSS・JavaScript各30問の選択・入力・穴埋め問題で知識を定着させます。

STEP 5 — 実践チャレンジ（10課題・各30分〜2時間）

完成イメージを見ながら、ステップバイステップで作品を作ります。

📖 作品アイデア10選

STEP 6 — GitHub Pages 公開（約1時間）

作った作品を無料でインターネットに公開します。

📖 デプロイ手順

📚 リポジトリ · コミット

STEP 7 — 自由課題（自分のペース）

テーマを自分で決めて、オリジナル作品を作ります。

📖 ポートフォリオの作り方