レッスン10: ここまでの知識で完成！HTMLで1ページWebサイトを制作しよう
これまで学んだHTMLの知識を活かして、自分だけのWebページを作成しましょう。
🎯 学習目標
- これまでに学んだタグや構造を復習する
- シンプルなWebページを自力で作れるようになる
- 実際の制作フローを体験する
📚 レッスン
1. これまで学んだ主なHTML要素
| 内容 | タグ例 |
|---|---|
| 文書構造 | <!DOCTYPE html>, <html>, <head>, <body> |
| 見出し・段落 | <h1>〜<h6>, <p>, <br> |
| リスト | <ul>, <ol>, <li> |
| 画像・リンク | <img>, <a> |
| フォーム（基本） | <form>, <input>, <button> |
| フォーム（応用） | <select>, <textarea> |
| 表 | <table>, <tr>, <td>, <th> |
| メタ情報 | <meta>, <title>, <link> |
| セクション分け | <header>, <nav>, <main>, <section>, <footer>, <div> |
2. 今回の制作内容
🧩 テーマ：自己紹介ページ（ミニポートフォリオ）
以下の要素をすべて含めた1ページ構成のHTMLファイルを作成しましょう。
🔹 構成例
| セクション | 内容例 |
|---|---|
| ヘッダー | 名前・ページタイトル |
| ナビゲーション | ページ内リンク（プロフィール・作品など） |
| 自己紹介 | 自分の経歴やスキルなどの簡単な説明 |
| 制作実績 | 表形式で作品名・内容・日付などを紹介 |
| お問い合わせ | フォーム：名前・メール・メッセージなど |
| フッター | コピーライトなどの情報 |
3. サンプルコード構成（骨組みのみ）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML学習者による自己紹介ページ">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のポートフォリオ</title>
</head>
<body>
<header>
<h1>私のポートフォリオ</h1>
<nav>
<ul>
<li><a href="#profile">プロフィール</a></li>
<li><a href="#works">制作実績</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section id="profile">
<h2>プロフィール</h2>
<p>私はHTMLを学ぶ社会人です。趣味は○○です。</p>
</section>
<section id="works">
<h2>制作実績</h2>
<table border="1">
<tr><th>作品名</th><th>説明</th><th>日付</th></tr>
<tr><td>サンプルA</td><td>簡単な自己紹介サイト</td><td>2025/05</td></tr>
</table>
</section>
<section id="contact">
<h2>お問い合わせ</h2>
<form>
<label>お名前: <input type="text" name="name"></label><br>
<label>メール: <input type="email" name="email"></label><br>
<label>メッセージ:<br>
<textarea name="message" rows="4"></textarea></label><br>
<button type="submit">送信</button>
</form>
</section>
</main>
<footer>
<p>© 2025 私の名前</p>
</footer>
</body>
</html>今日のまとめ
- HTMLの基本構造・要素を使いこなせるようになった
- 実際の制作でタグを組み合わせる力がついた
- Web制作の「入口」に立てた状態
📚 リファレンス
このレッスンで学んだHTMLタグの詳細については、リファレンスページで確認できます。
✍️ 演習問題
ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。
右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。
1. 自分だけの1ページを作ろう！
以下を意識しながらオリジナルページを作成しましょう。
- 全体構造（
<header><main><footer>）を意識する - 意味のあるタグを選んで使う（見た目より意味重視）
- 表やフォームも積極的に使ってみる
<title>や<meta>も設定する
今回の演習はコードの保存ができるコードエディタを使ってみましょう（右側のエディタとは違うエディタです）！
✅ 理解度チェック
クイズに正解すると、このレッスンは「完了済み」として記録されます。
📘 次回予告
「レッスン11：作ったページを公開しよう！Webページの最終チェックと公開方法」へ続きます！作成したHTMLページを確認して、Web上に公開する方法を学びましょう。