1. 進くんと学ぶ！Webサイト制作入門とは？
野球の練習みたいに、Web制作を基礎から楽しく学んでみませんか？
当講座は、猪狩進くんと一緒に会話形式のゲーム（会話パート）でイメージを掴み、実践的なWebノート（解説パート）でHTML/CSSの基礎を身につける体験型学習システムです⚾
この講座の嬉しいポイント
- ゲーム形式で楽しく理解： 進くんとの会話やクイズを楽しみながらWeb制作の基本概念が身につきます。
- HTML/CSSの基礎を網羅： 基礎的なタグの扱いからCSSを使ったデザインの調整までしっかり学べます。
- プレイヤー名変換機能： 設定した名前で進くんが呼びかけてくれるので、より没入感をもって楽しめます。
- 全章クリア特典： 全章をクリアすると限定のエピローグや衣装切替機能が解放されます！
2. 実践編：おすすめの学習ステップ
学習の流れはとってもシンプル！会話パートと解説Webページを行き来することで、知識がしっかり定着します。
1ゲームパートで概念を把握する
まずはゲームパートからスタート！進くんとの会話やクイズを楽しみながら、Web制作の大まかな概念や流れを掴みます。
2解説ページへ移動する
会話パートの最後に出てくるボタンを押して、解説ページへ移動しましょう。
3実際のコードを見ながら復習する
具体的なコード例を見ながら、手書きHTML/CSSの正しい書き方やタグの使い分けを詳しくチェックします。
4次の章のゲームへ挑戦！
解説ページの末尾から次の章のゲームパートへ進みましょう。全5章を順番にクリアしてマスターを目指します！
3. カリキュラム目次一覧
- 第1章：まずは道具を揃えよう！〜HTMLの基本骨格〜
HTMLの役割と、文書の基礎となるタグ（DOCTYPE宣言やpタグ）の考え方を学びます。 - 第2章：文章に背番号をつけよう！〜見出し・段落・改行〜
見出しタグ（h1〜h6）の正しい順番や、文章の段落（p）と改行（br）の使い分けをマスターします。 - 第3章：試合のハイライト（画像）を飾ろう！〜imgタグと相対パス〜
画像を表示するimgタグの使い方と、ファイルの場所を示す「相対パス」の概念を理解します。 - 第4章：他のグラウンドへ遠征だ！〜aタグと別タブ表示〜
ページ同士をつなぐリンク（aタグ）や、外部サイトを安全に開くtarget="_blank"を学びます。 - 第5章：CSSでユニフォームを着せよう！〜CSSの基礎〜
見た目を飾るCSSの書き方（セレクタ・プロパティ・値）や、色・サイズ・配置の変え方を学びます。
4. プレイヤー設定とクリア特典
お名前設定や豪華なクリア特典など、学習を楽しく継続できる仕組みが満載です！
名前設定フォームからお好きな名前を入力すると、進くんが会話内でその名前を呼びかけてくれます。
全5章完走の豪華特典 👑
- エピローグの解放： 全5章をクリアすると限定ストーリー（エピローグ）を閲覧できるようになります。
- 衣装切替機能： クリア後はゲーム内の「👕 衣装切替」ボタンから、ブレザー姿の進くんと一緒に復習が可能です。
⚠️ 学習データについて
設定した名前やクリア実績、衣装の解放状況はお使いのブラウザ（Local Storage）に自動保存されます。「学習データをリセット」ボタンを押すことで、いつでも初期状態に戻すことができます。
設定した名前やクリア実績、衣装の解放状況はお使いのブラウザ（Local Storage）に自動保存されます。「学習データをリセット」ボタンを押すことで、いつでも初期状態に戻すことができます。
5. 制作・技術に関するお知らせ
当コンテンツのプログラム構築および一部グラフィックには補助ツールとして生成AI技術を活用しております。より分かりやすく快適な学習体験をお届けできるよう、手作業での調整や工夫を重ねて制作しています。