自由課題:自分だけのウェブページを作ろう
📖 導入
HTML レッスン1〜6 で学んだことを使って、自分だけのウェブページを作りましょう!
テーマは自由です。正解はありません。「作りたいもの」を作るのがいちばんの練習になります。
💡 テーマ例
- 🎤 推しのアーティスト・キャラクター紹介ページ
- ⚽ 自分の部活・趣味の紹介ページ
- 🍕 架空のお店のメニューページ
- 👤 自己紹介ページ(名前・趣味・好きなもの)
✍️ 作り始める前に:完成の条件を決めよう
まず「完成したらどんな状態か」を3つ書いてから作り始めましょう。
✅ 必須要素
- ✅ HTML タグを 3種類以上 使うこと
- ✅ ブラウザで開いて正しく表示されること
- ✅ ファイル名は
index.htmlにすること
🏆 難易度別チャレンジ
★☆☆ 基本
- 見出し・段落・画像を使った1ページを作る
★★☆ 応用
- リストや表を使って情報を整理する
- ヘッダー・メイン・フッターに
<div>で分ける
★★★ 挑戦
- 複数のページを作り、
<a>タグでリンクでつなぐ - フォームを使ってアンケートページを追加する
🔍 ヒント
ヒントを見る(まず自分で考えてみよう)
- タイトルや見出し:
<h1><h2> - 文章:
<p> - 画像:
<img src="画像ファイル名" alt="説明"> - リンク:
<a href="URL">リンクテキスト</a> - 箇条書き:
<ul>+<li> - 表:
<table><tr><th><td> - ページを区切る:
<div>
わからないタグは 〇〇 HTML 使い方 で検索してみよう!
📌 完成したら
作ったページをブラウザで開いて、自分の目で確認しましょう。
✅ 完成の条件3つをすべて満たしていたら、このレッスンは完了です!
次は CSS コースで、このページをおしゃれにデザインしていきます。
次は CSS コースで、このページをおしゃれにデザインしていきます。