ノベルゲーム風体験型Web学習

進くんと学ぶ！Webサイト制作入門

野球の練習みたいに、Web制作を基礎から楽しく学ぼう！

この講座は、猪狩進くんと一緒に会話形式のゲームでイメージを掴み、
実践的なWebノートでHTML/CSSの基礎を身につける体験型学習システムです。

👑 COMPLETE! ゲーム画面プレビュー

✏️ プレイヤーのお名前設定

進くんがゲーム内であなたを呼ぶ名前を設定できます。

👑 全5章完走おめでとうございます！
進くんとの学習をすべて修了しました！ゲーム右上にある「👕 衣装切替」ボタンから、いつでもブレザー姿の進くんと一緒に復習できます。
🏆 エピローグを見る
🎮 ゲームを第1章からスタートする！
⚠️ プレイ前の注意事項
  • 📱 ゲームをモバイル端末でプレイする場合は、端末を横向きにすることを推奨します。
  • 🔊 ゲームを開始するとBGMが流れます。音量にご注意ください。

📚 カリキュラム目次

気になる章を選択して、ゲームパートまたは解説テキストから直接学習を始めることもできます。

第1章
まずは道具を揃えよう！〜HTMLの基本骨格〜
HTMLの役割と、文書の基礎となるタグ（DOCTYPE宣言やpタグ）の考え方を学びます。
🎮 ゲームで遊ぶ 📖 解説を読む
第2章
文章に背番号をつけよう！〜見出し・段落・改行〜
見出しタグ（h1〜h6）の正しい順番や、文章の段落（p）と改行（br）の使い分けをマスターします。
🎮 ゲームで遊ぶ 📖 解説を読む
第3章
試合のハイライト（画像）を飾ろう！〜imgタグと相対パス〜
画像を表示するimgタグの使い方と、ファイルの場所を示す「相対パス」の概念を理解します。
🎮 ゲームで遊ぶ 📖 解説を読む
第4章
他のグラウンドへ遠征だ！〜aタグと別タブ表示〜
ページ同士をつなぐリンク（aタグ）や、外部サイトを安全に開くtarget="_blank"を学びます。
🎮 ゲームで遊ぶ 📖 解説を読む
第5章
CSSでユニフォームを着せよう！〜CSSの基礎〜
見た目を飾るCSSの書き方（セレクタ・プロパティ・値）や、色・サイズ・配置の変え方を学びます。
🎮 ゲームで遊ぶ 📖 解説を読む

💡 この講座の学習スタイル

おすすめの学習ステップ
  1. ステップ1： ゲームパートで進くんとの会話・クイズを楽しみながら大まかな概念を把握！
  2. ステップ2： 会話の最後に出るボタンから解説Webページへ移動！
  3. ステップ3： 実際のコード例を見ながら手書きHTML/CSSの書き方をチェック！
  4. ステップ4： 解説ページの末尾から次の章のゲームへ！
🤖 制作・技術に関するお知らせ
当コンテンツのプログラム構築および一部グラフィックには補助ツールとして生成AI技術を活用しております。より分かりやすく快適な学習体験をお届けできるよう、手作業での調整や工夫を重ねて制作しています。