HTML コース
0 1 2 3 4 5 6
自由課題：自分だけのウェブページを作ろう
⏱ 約25分 やってみよう 1 クイズ 1
📖 導入
HTML レッスン1〜6 で学んだことを使って、自分だけのウェブページを作りましょう！
テーマは自由です。正解はありません。「作りたいもの」を作るのがいちばんの練習になります。
💡 テーマ例
- 🎤 推しのアーティスト・キャラクター紹介ページ
- ⚽ 自分の部活・趣味の紹介ページ
- 🍕 架空のお店のメニューページ
- 👤 自己紹介ページ（名前・趣味・好きなもの）
✍️ 作り始める前に：完成の条件を決めよう
まず「完成したらどんな状態か」を3つ書いてから作り始めましょう。
✅ 必須要素
- ✅ HTML タグを 3種類以上 使うこと
- ✅ ブラウザで開いて正しく表示されること
- ✅ ファイル名は
index.htmlにすること
AIレビューを受ける
書いたコードを、Gemini か ChatGPT に見てもらおう。答えを教えてもらうのではなく、良い点と改善点を1つずつ確認する使い方だよ。
Step 1プロンプトをコピー
Step 2開いて貼り付ける
※ ChatGPTは自動で入力されるよ。Geminiは環境によって自動で入らないことがあるので、その場合は貼り付けてね。
⚠️ 名前・学校名・住所などの個人情報はAIに入力しないでね。
書いたコード以外の個人的な内容は書かないようにしよう。
保護者の方はこちらもご覧ください。
🏆 難易度別チャレンジ
★☆☆ 基本
- 見出し・段落・画像を使った1ページを作る
★★☆ 応用
- リストや表を使って情報を整理する
- ヘッダー・メイン・フッターに
<div>で分ける
★★★ 挑戦
- 複数のページを作り、
<a>タグでリンクでつなぐ - フォームを使ってアンケートページを追加する
🔍 ヒント
ヒントを見る（まず自分で考えてみよう）
- タイトルや見出し：
<h1><h2> - 文章：
<p> - 画像：
<img src="画像ファイル名" alt="説明"> - リンク：
<a href="URL">リンクテキスト</a> - 箇条書き：
<ul>+<li> - 表：
<table><tr><th><td> - ページを区切る：
<div>
わからないタグは 〇〇 HTML 使い方 で検索してみよう！
AIと一緒に作る
自由課題を、AIにヒントをもらいながら進めよう。完成コードはもらわず、自分の手で書くのがポイント。
Step 1プロンプトをコピー
Step 2開いて貼り付ける
※ ChatGPTは自動で入力されるよ。Geminiは環境によって自動で入らないことがあるので、その場合は貼り付けてね。
⚠️ 名前・学校名・住所などの個人情報はAIに入力しないでね。
書いたコード以外の個人的な内容は書かないようにしよう。
保護者の方はこちらもご覧ください。
📌 完成したら
作ったページをブラウザで開いて、自分の目で確認しましょう。
✅ 完成の条件3つをすべて満たしていたら、このレッスンは完了です！
次は CSS コースで、このページをおしゃれにデザインしていきます。
次は CSS コースで、このページをおしゃれにデザインしていきます。
このレッスンは役に立ちましたか？
フィードバックありがとうございます！
目次