ついに最終課題ですね！これまで学んだことを全部使って、本格的なサイトを作ってみたいです！
素晴らしい意気込みだね！この最終課題では、HTMLの全ての技術を組み合わせて、君だけのオリジナルWebサイトを制作してもらう。まずは理解度を確認するクイズから始めて、そのあとで本格的なサイト制作に取り組もう。
6章分の知識を全部使うとなると、かなり本格的になりそうですね。どんなサイトを作ればいいんでしょうか？
君の興味や趣味に関するポートフォリオサイトを作ることをおすすめするよ。自己紹介、作品紹介、お問い合わせフォームなど、実際に活用できるサイトにしよう。まずは総合クイズで知識をしっかり確認してから、設計に入っていこう。
でも、実際に使えるサイトって言われると、ちょっと緊張しますね…。
大丈夫だよ！このプロジェクトでは段階的に進めるから、無理なく完成できる。しかも、完成したサイトは以下のような場面で実際に活用できるんだ：
学校・進路関連：
- 進学時の自己PR資料
- クラブ活動や委員会の紹介
- 課題研究やプロジェクトの成果発表
将来の活動：
- アルバイトや就職活動での自己紹介
- 趣味や特技のアピール
- 創作活動やボランティア活動の記録
つまり、HTMLを学ぶだけでなく、君の将来に役立つ「デジタル名刺」を作ることになるよ。
HTML総合マスタークイズ
HTMLの全範囲を網羅した20問の総合クイズだ。まずは基礎固めクイズで概念をしっかり確認してから、実践応用クイズでコーディング力をチェックしよう。2つのセクションをクリアできれば、君はもう立派なHTMLマスターだ！
第1セクション：基礎固めクイズ
まずは基礎固めクイズから始めよう。HTMLの基本概念、要素の使い分け、セマンティックな考え方など、しっかりとした土台となる知識を確認するよ。
基礎固めクイズ（10問）
HTMLの正式名称として正しいものはどれですか？
HTML文書の文字エンコーディングを指定するために必要なものはどれですか？
見出し要素（h1〜h6）の正しい使い方はどれですか？
相対パスと絶対パスの説明として正しいものはどれですか？
順序のないリストを作成する要素はどれですか？
フォームでユーザーからテキストを複数行入力してもらう場合に使う要素はどれですか？
ページのメインナビゲーションに最も適したセマンティック要素はどれですか？
画像のalt属性の主な目的はどれですか？
定義リストを作成するために使う要素の組み合わせはどれですか？
HTML5でページの構造を意味的に表現する要素として正しい組み合わせはどれですか？
第2セクション：実践応用クイズ
基礎固めお疲れ様！今度は実践応用クイズに挑戦しよう。実際のコードを見ながら答える問題で、現場で役立つ実装力をチェックするよ。
実践応用クイズ（10問）
次のHTML5文書の基本構造で、①〜③に入るべき適切な要素はどれですか？
<!DOCTYPE html>
<html lang="ja">
<①>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>マイサイト</title>
</①>
<②>
<③>メインコンテンツ</③>
</②>
</html>次のリンク実装で、①②に入るべき適切な属性と値はどれですか？
<a ①="mailto:contact@example.com" ②="_blank">
お問い合わせメール
</a>次の表構造で、①〜③に入るべき適切な要素はどれですか？
<table>
<①>
<tr>
<②>商品名</②>
<②>価格</②>
</tr>
</①>
<tbody>
<tr>
<③>りんご</③>
<td>100円</td>
</tr>
</tbody>
</table>メールアドレスの入力フォームとして最も適切なHTML実装はどれですか？
①
<form>
<span for="email">メールアドレス</span>
<input type="email" id="email" name="email" required>
</form>
②
<form>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" required>
</form>
③
<form>
<label for="email">メールアドレス</label>
<input type="email" class="email" name="email" required>
</form>
④
<form>
<label for="email">メールアドレス</label>
<input type="email" value="email" name="email" required>
</form>次の画像表示で、①〜③に入るべき適切な属性はどれですか？
<img ①="profile.jpg"
②="プロフィール写真"
③="300"
height="300">次のセマンティックな構造で、①②に入るべき適切な要素はどれですか？
<①>
<h2>最新ニュース</h2>
<②>2024年9月12日</②>
<p>新しい機能をリリースしました。</p>
</①>ユーザー登録フォームとして最も適切なHTML実装はどれですか？
①
<form>
<input type="name" placeholder="お名前">
<input type="age" placeholder="年齢">
<input type="password" placeholder="パスワード">
</form>
②
<form>
<input type="text" placeholder="お名前">
<input type="number" placeholder="年齢">
<input type="password" placeholder="パスワード">
</form>
③
<form>
<input type="text" placeholder="お名前">
<input type="digit" placeholder="年齢">
<input type="hidden" placeholder="パスワード">
</form>
④
<form>
<input type="text" placeholder="お名前">
<input type="count" placeholder="年齢">
<input type="secure" placeholder="パスワード">
</form>次のSEO対策メタタグで、①〜③に入るべき適切な属性と値はどれですか？
<head>
<meta ①="②" content="③">
<title>マイポートフォリオ</title>
</head>次の音声ファイル埋め込みで、①②に入るべき適切な属性はどれですか？
<audio ①>
<source ②="music.mp3" type="audio/mpeg">
お使いのブラウザーは音声の再生に対応していません。
</audio>次の外部コンテンツ埋め込みで、①②に入るべき適切な属性はどれですか？
<iframe ①="https://www.youtube.com/embed/video_id"
width="560"
height="315"
②="allow-scripts allow-same-origin">
</iframe>実践：総合プロジェクト - オリジナルポートフォリオサイト
このセクションでは、第1章から第6章で学んだHTMLの全技術を統合して、完成度の高いポートフォリオサイトを作成します。セマンティックHTML、フォーム、マルチメディア、アクセシビリティ対応まで、プロレベルのWebサイト制作を体験しましょう。
いよいよHTML学習の集大成だ！君がこれまで学んだ全ての技術を組み合わせて、プロレベルのポートフォリオサイトを作ってみよう。単なる練習ではなく、実際に公開できるレベルのサイトを目指すぞ。
ワクワクします！セマンティック要素、フォーム、画像、リンク…全部使って本格的なサイトを作ってみたいです！
自分のスキルや作品を紹介できるサイトがあると、将来の進路にも役立ちそうですね！
実践ファイルのダウンロード
以下の手順とプレビューを参考に、自分でchapter6フォルダと各HTMLファイルを作成してみましょう。実際に手を動かすことで理解が深まります。
完成版のファイル一式をダウンロードしたい場合は、こちらをご利用ください：
chapter6.zip をダウンロードプロジェクト概要と学習目標
このプロジェクトで制作するのは、3ページから構成される本格的なポートフォリオサイトです。
- index.html（トップページ） サイトの「玄関」として、訪問者を迎え入れる役割。サイト全体の概要、ナビゲーション、最新情報を提供
- profile.html（総合プロフィール） 「メインルーム」として、個人情報・経歴・スキル・作品を統合して紹介。訪問者が知りたい情報を一箇所で提供
- contact.html（お問い合わせ） 「コミュニケーションスペース」として、連絡方法やフォームを提供。双方向のやり取りを可能にする
プロジェクトファイルの準備と構成
ファイル構成の全体像
まず、制作するプロジェクトのファイル構成を確認しましょう。
html-practice/
└── chapter6/
├── index.html (トップページ - サイトの入り口)
├── profile.html (総合プロフィール - 個人情報・経歴・スキル・作品)
├── contact.html (お問い合わせ)
├── images/ (画像フォルダー)
│ ├── profile.jpg (プロフィール写真)
│ ├── project1.jpg (作品画像1)
│ ├── project2.jpg (作品画像2)
│ └── video-poster.jpg (動画ポスター画像)
└── media/ (マルチメディアファイル)
├── learning-record.mp4 (学習記録動画)
├── study-note.mp3 (音声ノート)
└── resume.pdf (参考文書)プロジェクトフォルダの作成手順
- VS Codeの「ファイル」→「フォルダーを開く」でデスクトップの「html-practice」フォルダーを選択してください。
- 「chapter6」フォルダを作成します
- 「chapter6」フォルダ内に「images」フォルダを作成します
- 「chapter6」フォルダ内に「media」フォルダを作成します
- 「chapter6」フォルダ内に3つのHTMLファイル「index.html」「profile.html」「contact.html」を作成します
- 「images」フォルダと「media」フォルダには、chapter6.zipをダウンロードして画像とマルチメディアファイルを展開して配置してください。
このプロジェクトで習得する技術スキル
このプロジェクトでは、6章分で学んだHTMLの技術を総動員するよ。完成後には、プロレベルのWebサイト制作スキルが身につくはずだ。
- HTML5セマンティック要素 header、nav、main、article、section、aside、footer要素の実践的使用
- SEO対策の基礎 適切なメタタグ、構造化データ、検索エンジン最適化
- アクセシビリティ対応 ラベル関連付け、見出し階層、代替テキスト、キーボード操作対応
- マルチメディア統合 video、audio、iframe、embed要素の実装とフォールバック対応
- フォーム機能 包括的な入力フィールド、バリデーション、ユーザビリティ向上
- ナビゲーション設計 サイト内リンク、現在ページ表示、ユーザー導線の最適化
- コンテンツ構造化 テーブル、リスト、定義リストの適切な使い分け
- 外部コンテンツ連携 YouTube埋め込み、PDF表示、SNSリンクの実装
トップページ（index.html）の作成
まずはサイトの入り口となるトップページを作ってみよう。シンプルで分かりやすく、他のページへの適切な導線を作ることが重要だ。
プレビュー:
詳細な実装手順（index.html）
- 基本HTML5構造の作成
<!DOCTYPE html>宣言、<html lang="ja">、完全なmeta要素セット - SEO対策メタタグの実装：
<meta charset="UTF-8">で文字エンコーディング設定<meta name="viewport">でレスポンシブ対応<meta name="description">でページ説明（150文字以内）<meta name="keywords">で関連キーワード設定<meta name="author">で作成者情報<title>要素で適切なページタイトル
- セマンティックヘッダーの構築：
<header>要素でサイトヘッダーを定義<h1>要素でサイトタイトル<nav>要素でメインナビゲーション<ul>・<li>・<a>要素で3ページへのリンク設置（トップ・プロフィール・お問い合わせ）
- メインコンテンツエリアの実装：
<main>要素でページの主要コンテンツを定義<article>要素で自己紹介セクション<section>要素で論理的な内容分割<h2>～<h4>で適切な見出し階層
- プロフィール情報の表示：
- プロフィール画像：
<img src="images/profile.jpg" alt="田中太郎のプロフィール写真"> - 基本情報：名前、年齢、所在地などを
<p>要素で記載 - スキル概要：
<ul>要素でスキル一覧 - 趣味・興味：
<p>要素で簡潔に紹介
- プロフィール画像：
- サイドバー情報の構築：
<aside>要素でサイドバー定義- 最新情報、SNSリンクなどの補助情報
<a href="#" target="_blank" rel="noopener">で外部リンク
- フッター情報の実装：
<footer>要素でサイトフッター- サイト内ナビゲーション
- 著作権表示：
<small>要素で控えめに表示
総合プロフィール（profile.html）の作成
次は統合プロフィールページを作ってみよう。個人情報、経歴、スキル、作品の全てを1つのページにまとめて、訪問者が知りたい情報を効率的に提供しよう。
プレビュー:
詳細な実装手順（profile.html）
- 基本構造とナビゲーション HTML5構造、他ページへのナビゲーション、現在ページのaria-current=“page”設定
- 基本情報セクション：
<section>要素で「基本情報」セクション作成<table>要素で構造化された基本情報表示<thead>・<tbody>・<th>・<td>で適切な表構造- 名前、生年月日、出身地、現住所、職業などの情報
- 経歴・学歴セクション：
<section>要素で「経歴」セクション作成- 時系列での経歴を
<dl>・<dt>・<dd>要素で整理 - 学歴、職歴、資格などを定義リスト形式で記載
- 期間と内容を明確に分けて表示
- スキル・専門分野セクション：
- プログラミング言語：
<ul>要素でスキル一覧 - ツール・ソフトウェア：習熟度を含めた詳細リスト
- 言語能力：レベル表示付きの能力紹介
- 各スキルに
<strong>要素で重要度を表現
- プログラミング言語：
- 作品・プロジェクトセクション：
<article>要素で個別プロジェクトを定義<h3>見出しでプロジェクト名<figure>・<img>・<figcaption>要素で作品画像表示- プロジェクト詳細を
<dl>要素で構造化：制作期間、使用技術、制作目的、主な機能 <p>要素で制作過程や学んだことを詳細に記載- 外部リンク：
<a href="#" target="_blank" rel="noopener">でデモサイトへ
- マルチメディア作品セクション：
<video>要素で学習記録動画を埋め込み：controls、width、height、poster属性<source>要素で複数動画形式対応（MP4、WebM）<audio>要素で音声ノート：controls、preload属性- フォールバックコンテンツとしてダウンロードリンクを提供
- 参考資料・外部コンテンツセクション：
<iframe>要素でYouTube動画埋め込み：allow、allowfullscreen属性<embed>要素でPDF文書表示：src、type、width、height属性- レスポンシブ対応のiframe実装
- 外部コンテンツが読み込めない場合のフォールバック対応
- 趣味・興味セクション：
<h3>見出しで趣味カテゴリ分け- 読書、映画、スポーツなどの詳細説明
<p>要素で各趣味の具体的な内容を記載
- 座右の銘・価値観セクション：
<blockquote>要素で座右の銘を引用形式で表示<cite>要素で出典情報- 価値観や人生観を
<p>要素で表現
- 将来の目標セクション：
- 短期目標と長期目標を分けて記載
<ol>要素で優先順位付きの目標リスト- 具体的なステップを含む目標設定
お問い合わせページ（contact.html）の作成
最後は包括的なお問い合わせページだ。フォーム要素を総動員して、ユーザーが快適に連絡できる仕組みを作ろう。
プレビュー:
詳細な実装手順（contact.html）
- 基本構造とナビゲーション HTML5構造、統一ナビゲーション、現在ページ表示
- 連絡先情報セクション：
<section>要素で「連絡先情報」セクション作成<address>要素で正式な連絡先情報- メールアドレス：
<a href="mailto:tanaka@example.com">でクリック可能 - SNSリンク：
target="_blank" rel="noopener"で安全な外部リンク - 所在地情報と営業時間（返信可能時間）
- お問い合わせフォームセクション：
<form action="#" method="post">でフォーム構造- 基本情報フィールドセット：
<fieldset><legend>基本情報</legend>でグループ化- 名前：
<input type="text" required maxlength="50"> - メールアドレス：
<input type="email" required> - 電話番号：
<input type="tel">（任意項目） - 所属・組織：
<input type="text" maxlength="100">
- お問い合わせ内容フィールドセット：
- カテゴリ選択：
<select required>で必須選択 - 件名：
<input type="text" required maxlength="100"> - メッセージ：
<textarea required rows="8" maxlength="500">
- カテゴリ選択：
- 追加オプションフィールドセット：
- ニュースレター希望：
<input type="checkbox"> - サイト発見経緯：
<select>で任意選択
- ニュースレター希望：
- 送信前確認フィールドセット：
- プライバシーポリシー同意：
<input type="checkbox" required> <details><summary>要素で展開可能な詳細情報
- プライバシーポリシー同意：
- 返信についてセクション：
<dl>・<dt>・<dd>要素で返信ポリシーを構造化- 返信時期、返信方法、返信できない場合の説明
- 緊急連絡先の提供
コーディング時の注意点
- セマンティック要素の正しい使用 header、nav、main、article、section、aside、footerを目的に応じて適切に使い分ける
- 見出し階層の論理性 h1→h2→h3→h4の順序を守り、レベルを飛ばさない
- id属性の一意性 サイト全体でid属性の重複がないよう注意（特に複数ページで同じid使用）
- alt属性の適切な記述 装飾的画像は空のalt=""、情報を伝える画像は具体的で簡潔な説明
- 外部リンクのセキュリティ target=“_blank”使用時は必ずrel=“noopener”を併記
- フォームのアクセシビリティ label要素のfor属性とinput要素のid属性を正確に対応
- メタタグの最適化 各ページに適切で異なるtitle・descriptionを設定
- 相対パスの統一 サイト内リンクと画像パスを統一された形式で記述
実装完了後のチェックリスト
- HTML5基本構造 全ページでDOCTYPE宣言、適切なlang属性、必須meta要素を設定
- セマンティック要素の適切な使用 header・nav・main・article・section・aside・footer要素を意図に応じて使い分け
- ナビゲーション機能 全ページ間の双方向リンクが正常動作、現在ページの視覚的表示
- 画像とメディア要素 適切なalt属性、ファイル形式の選択、図表のfigcaption要素
- マルチメディア要素 video・audio要素のcontrols属性、複数形式対応、フォールバックコンテンツ
- 外部コンテンツ埋め込み iframe・embed要素の適切な属性設定、セキュリティ考慮
- テーブルとリスト構造 表は適切なheader構造、リストは意味に応じたul・ol・dl使い分け
- フォーム機能 ラベルとコントロールの関連付け、適切なinput type、検証機能
- アクセシビリティ対応 見出し階層、キーボード操作、スクリーンリーダー対応
- SEO対策 各ページ固有のtitle・description、構造化データの実装
- リンク機能 内部リンク・外部リンク・メールリンクの正常動作確認
- クロスブラウザ確認 主要ブラウザでの表示・動作チェック
- W3C準拠 HTML Validatorでエラー・警告の解消
- レスポンシブ対応 viewportメタタグの設定、画像・動画の適応的表示
プロジェクト完成度チェック（最終確認）
全体の実装が完了したら、以下の観点からプロジェクトの完成度をチェックしてみよう。プロのWeb制作者が使用する品質基準だ。
- ページ間連携の確認 全ページから他のページへ正常にナビゲーションできる
- 3ページ構成の統一性 ヘッダー・ナビゲーション・フッターのデザインと構造が一貫している
- コンテンツの充実度 各ページに十分な内容があり、実際の用途で使用できるレベル
- Chapter6要素の活用 iframe、video、audio、embed要素が適切に実装されている
- ユーザビリティテスト 家族や友人に実際に使ってもらい、分かりやすさを確認
- モバイル考慮 スマートフォンでも基本的な閲覧・操作ができる
- 将来の拡張性 CSSやJavaScript追加時に対応しやすい構造になっている
- 実用性の確認 実際のポートフォリオサイトとして使用できる品質に達している
学習効果を高めるポイント
- 段階的制作 1ページずつ完成させ、都度ブラウザで確認しながら進める
- 比較検証 各ページの構造を比較し、共通要素と個別要素の使い分けを確認
- ユーザー視点のテスト 実際の訪問者として各機能を使用し、使いやすさを評価
- アクセシビリティ体験 タブキーのみでのナビゲーション、スクリーンリーダーでの読み上げを想像
- コード最適化 冗長な記述がないか見直し、より効率的な構造に改善
- 拡張可能性の考慮 将来的なCSSやJavaScript追加を想定した構造設計
- プロフェッショナル基準 実際のWeb制作現場で求められる品質基準を意識
- 継続的改善 完成後も定期的に見直し、新しく学んだ技術を適用
デバッグとトラブルシューティング
制作中によく発生する問題と解決方法を把握しておきましょう。
- リンクが動作しない ファイルパス、ファイル名の大文字小文字、拡張子を確認
- 画像が表示されない 画像ファイルの存在、パス、ファイル形式、alt属性の確認
- フォームが送信されない action属性、method属性、name属性の設定確認
- レイアウトが崩れる HTML構造の論理性、要素の適切な開閉タグ確認
- 文字化け meta charset=“UTF-8”の設定、ファイル保存時の文字コード確認
- W3C検証エラー 必須属性の未設定、不正な要素配置、属性値のミス確認
- アクセシビリティ警告 ラベルとフォーム要素の関連付け、見出し階層の確認
- パフォーマンス問題 画像サイズ、不要なHTMLコメント、冗長な構造の見直し
まとめ
完成しました！6章分の知識を全部使って、本格的なサイトができあがりました！
素晴らしい！君は真のHTMLマスターだ。このプロジェクトで制作したポートフォリオサイトは、単なる学習の成果物ではなく、実際に活用できる「デジタル資産」になったよ。
君が達成したこと：
- HTML5の全技術を統合した実用的なWebサイト制作
- セマンティックマークアップによる意味のある文書構造
- アクセシビリティ対応による誰もが使いやすいサイト
- マルチメディア要素の実装による豊かなコンテンツ表現
- SEO対策による検索エンジン最適化の基礎
この経験を活かして、さらに魅力的なWebサイト制作にチャレンジしていこう。
次はCSSでもっときれいにデザインしてみたいです！このHTMLが基盤になるんですよね？
その通り！しっかりとしたHTML構造があるからこそ、CSSで美しいデザインを実現できるんだ。君が作ったセマンティックなHTMLは、CSS学習の最高の素材になるよ。
HTML学習完了！おめでとう
- 習得スキル HTML5の全機能、セマンティックマークアップ、アクセシビリティ対応、マルチメディア統合
- 制作物 プロレベルの3ページ構成ポートフォリオサイト（実用可能な品質）
- 実用価値 進学・就職・自己紹介で実際に活用できるデジタル名刺
- 技術的基盤 CSS・JavaScript学習のための強固なHTML構造
- 次のステップ CSSによるデザイン強化、JavaScriptによる動的機能追加
- 応用分野 レスポンシブWebデザイン、PWA開発、SEO最適化、CMS活用
君はHTMLの基礎から応用まで完全にマスターし、実用的なWebサイトを制作できるスキルを身につけた。この知識を土台に、さらなるWeb技術の習得にチャレンジしよう！
継続学習のための次の目標:
- CSSで現在のサイトを美しくスタイリング
- JavaScriptでインタラクティブ要素を追加
- レスポンシブデザインでモバイル対応強化
- 実際にWebサーバーにアップロードして公開