セマンティックHTMLとアクセシビリティについて色々学びましたが、本当に理解できているか不安です。
それなら実践的なクイズで確認してみよう！セマンティック要素の使い分けやアクセシビリティの原則、そして実際に誰にでも使いやすいWebサイトを作るところまで、段階的に挑戦していこう。
クイズの後は、学んだ全てを使って、本当にアクセシブルなサイトを作ってみたいです！
素晴らしい考えだね！セマンティックHTMLとアクセシビリティは、すべての人が情報にアクセスできる「優しいWeb」を作るための基盤技術だからね。まずはクイズで知識を確認して、そのあとで実際にみんなが使いやすいWebサイトを作ってみよう。
第5章まとめクイズ
第5章の重要ポイントを15問にまとめた総合クイズだ。セマンティック要素・ページ構造・アクセシビリティの核心が網羅されているよ。意味を理解しながら取り組んでみよう。
第5章 総合まとめクイズ（15問）
次のセマンティック要素の説明で正しくないのはどれですか？
<article>と<section>の使い分けとして最も適切なのはどれですか？
次のページ構造で、HTML5のセマンティック要素を適切に使用しているのはどれですか？
<!-- A -->
<div class="header">
<div class="nav">メニュー</div>
</div>
<div class="content">記事内容</div>
<div class="footer">フッター</div>
<!-- B -->
<header>
<nav>メニュー</nav>
</header>
<main>記事内容</main>
<footer>フッター</footer>アクセシビリティの観点から、次のalt属性の使い方で最も適切でないのはどれですか？
<!-- A: グラフ画像 -->
<img src="sales-chart.png" alt="2024年売上推移グラフ">
<!-- B: 装飾画像 -->
<img src="decoration.png" alt="">
<!-- C: ボタン内のアイコン -->
<button>
<img src="search.png" alt="検索アイコン">
検索
</button>
<!-- D: 商品画像 -->
<img src="product.jpg" alt="商品画像">見出し階層として正しくないものはどれですか？
キーボードナビゲーションで最も重要な要素は何ですか？
次のARIA属性の使用例で適切でないのはどれですか？
<!-- A: アイコンボタン -->
<button aria-label="メニューを開く">
<i class="fas fa-bars"></i>
</button>
<!-- B: 通常のリンク -->
<a href="about.html" aria-label="詳細">会社概要</a>
<!-- C: 装飾アイコン -->
<span aria-hidden="true"><i class="fas fa-star"></i></span>
<!-- D: 入力フィールドの説明 -->
<input type="password" aria-describedby="pwd-help">
<div id="pwd-help">8文字以上で入力</div>次のHTML構造で、<time>要素を最も適切に使用しているのはどれですか？
<address>要素の使用法として正しいのはどれですか？
次のフォームのラベル付けで、アクセシビリティの観点から最も適切なのはどれですか？
<!-- A -->
<label>
名前：<input type="text">
</label>
<!-- B -->
<label for="name">名前：</label>
<input type="text" id="name">
<!-- C -->
<span>名前：</span>
<input type="text" placeholder="お名前を入力">
<!-- D -->
<input type="text" aria-label="名前" placeholder="名前">セマンティックHTMLの最大の利点は何ですか？
次のリンクテキストで、アクセシビリティの観点から最も問題があるのはどれですか？
次の<details>と<summary>要素の使用例で最も適切なのはどれですか？
<!-- A -->
<details>
<summary>よくある質問</summary>
<p>Q: 利用料金はかかりますか？</p>
<p>A: 無料でご利用いただけます。</p>
</details>
<!-- B -->
<details>
<summary>今すぐクリック！</summary>
<p>特別セール開催中です！</p>
</details>
<!-- C -->
<details>
<summary>重要</summary>
<p>メンテナンス情報</p>
</details>
<!-- D -->
<details open>
<summary>お知らせ</summary>
<p>新機能が追加されました。</p>
</details>次の定義リスト（dl、dt、dd）の使用例で最も適切でないのはどれですか？
<!-- A -->
<dl>
<dt>営業時間</dt>
<dd>平日 9:00-18:00</dd>
<dt>定休日</dt>
<dd>土日祝日</dd>
</dl>
<!-- B -->
<dl>
<dt>HTML</dt>
<dd>ハイパーテキストマークアップ言語</dd>
<dt>CSS</dt>
<dd>カスケーディングスタイルシート</dd>
</dl>
<!-- C -->
<dl>
<dt>商品一覧</dt>
<dd>りんご</dd>
<dd>みかん</dd>
<dd>バナナ</dd>
</dl>
<!-- D -->
<dl>
<dt>電話</dt>
<dd>03-1234-5678</dd>
<dt>メール</dt>
<dd>info@example.com</dd>
</dl>次の<mark>要素の使用例で最も適切でないのはどれですか？
<!-- A -->
<p>このイベントは<mark>3歳から8歳まで</mark>のお子様が対象です。</p>
<!-- B -->
<p>検索結果: "<mark>HTML</mark> セマンティック"</p>
<!-- C -->
<p><mark>重要なお知らせ</mark>: 明日は休館日です。</p>
<!-- D -->
<p><mark>弊社</mark>は最高品質の<mark>サービス</mark>を提供しています。</p>次のaria-describedby属性の使用例で最も効果的なのはどれですか？
実践：セマンティックHTMLとアクセシビリティを活用したサイト作成
このセクションでは、第5章で学んだセマンティックHTML要素とアクセシビリティの知識を使って、実用的なWebサイトを作成します。学んだすべての要素を組み合わせて、誰もが使いやすいサイトを作ってみましょう。
実践ファイルのダウンロード
以下の手順とプレビューを参考に、自分でchapter5フォルダとHTMLファイルを作成してみましょう。実際に手を動かすことで理解が深まります。
完成版のファイル一式をダウンロードしたい場合は、こちらをご利用ください：
library-site.html をダウンロードHTMLファイルの作成手順
まず、作成するファイルの全体構成を確認しましょう。
html-practice/
└── chapter5/
└── library-site.html (セマンティックHTMLサイト)「HTMLファイルを作ってみよう！」で作成した「html-practice」フォルダーをVS Codeで開きましょう。今回は第5章で学んだすべての要素を使った、完全なサンプルサイトを作ります。
HTMLファイルを作成するための手順を確認しましょう。
- VS Codeの「ファイル」→「フォルダーを開く」でデスクトップの「html-practice」フォルダーを選択してください。
- 「chapter5」フォルダを作成します
- 「chapter5」フォルダ内に新しいファイル「library-site.html」を作成します
実践してみよう！
今回は、第5章で学んだセマンティックHTML要素、テキスト意味要素、そしてアクセシビリティ技術をすべて組み合わせた図書館サイトを作成しよう。ARIAランドマーク、スキップリンク、適切なフォーム設計まで含めた、実用的なサイトになるよ。
プレビュー:
具体的な作成手順
以下の順序でHTMLファイルを作成していきましょう：
- Step 1: 基本構造の作成
<!DOCTYPE html>から始まるHTML5の基本構造を記述<html lang="ja">でページの言語を設定<head>内にタイトルとメタ情報を記述
- Step 2: ページ全体の構造要素を配置
<header>：ページ上部にサイト名（h1）とナビゲーション（nav）を配置<main>：メインコンテンツエリアとして複数の<section>を含む<aside>：サイドバーとして図書館の基本情報を配置<footer>：ページ下部に著作権情報を配置
- Step 3: ナビゲーションの作成
<nav aria-label="メインナビゲーション">内に<ul><li><a href="#○○">リンクテキスト</a></li></ul>の形で配置- 各リンクはページ内の対応するセクションにジャンプするよう設定
- Step 4: メインコンテンツのセクション作成
- お知らせセクション:
<section id="news" aria-labelledby="news-heading">内に複数の<article>を配置 - イベント情報セクション:
<section id="events" aria-labelledby="events-heading">内に複数の<article>を配置
- お知らせセクション:
- Step 5: 記事（article）内のコンテンツ作成
- 各
<article>内に<h3>で記事タイトルを配置 <time datetime="YYYY-MM-DD">で日付を表示<mark>で重要な情報をハイライト<details><summary>で詳細情報を折りたたみ表示<dl aria-describedby="補足説明のID"><dt><dd>で項目と説明をリスト化
- 各
- Step 6: サイドバー（aside）の作成
<aside id="info" aria-labelledby="library-info-heading">でセクションを明確化- 開館時間を
<dl><dt><dd>と<time>で構造化 - 連絡先情報を
<address>内に配置
各要素の配置例と確認ポイント
- header要素 ページ最上部に配置し、サイトタイトル（h1）とナビゲーション（nav）を含める
- nav要素 headerの中に
aria-label="メインナビゲーション"を付けて配置し、3つのページ内リンク（#news, #events, #info）を作成 - main要素 headerの下に配置し、2つのsectionを順番に配置する
- section要素 それぞれに
idとaria-labelledbyを設定して見出しと関連付ける（例：id="news" aria-labelledby="news-heading"） - 見出し要素 セクションの見出し（h2）には対応するidを設定（例：
id="news-heading"） - article要素 お知らせとイベント情報の各項目を独立したarticleとして作成
- time要素 日付・時刻には必ずdatetime属性を設定（例：
datetime="2024-12-29"） - mark要素 重要な情報（年齢制限、注意事項など）をハイライトする
- details/summary要素 詳細情報を折りたたみ表示で見やすくする
- dl/dt/dd要素 開催時間・対象年齢・参加費などの項目を構造化し、補足説明がある場合は
aria-describedbyで関連付ける - aside要素 mainの後に配置し、
aria-labelledbyで見出しと関連付ける（例：aria-labelledby="library-info-heading"） - aside内のsection要素 開館時間とアクセス情報をそれぞれ別のsectionとして整理
- address要素 アクセス情報のsection内で連絡先情報に使用（住所、電話、メール）
- footer要素 ページ最下部に著作権情報をsmall要素で配置
完成後のチェックリスト
- 基本構造 header、main、aside、footer要素が正しい順序で配置されている
- ナビゲーション nav要素内のリンクが各sectionのidに正しくジャンプし、
aria-labelで目的を説明している - 見出し階層 h1（サイト名）→ h2（各セクション）→ h3（記事タイトル・サブセクション）の順序を守る
- 見出しのid設定 セクションの見出し（h2）に対応するidが設定されている（例：
id="news-heading"） - ARIA関連付け section要素で
aria-labelledbyを使用して見出しと関連付けている - time要素 datetime属性と表示テキストが一致している（例：datetime=“14:00” 表示「14時00分」）
- 定義リスト dl、dt、dd要素で開催時間や参加条件が整理され、必要に応じて
aria-describedbyで補足説明と関連付けている - 折りたたみ要素 details/summary要素で詳細情報が表示・非表示切替できる
- サイドバーの構造 aside内に2つのsectionで開館時間とアクセス情報が整理されている
- 連絡先情報 address要素が適切に使用されている（図書館の連絡先のみ）
- 重要情報 mark要素で年齢制限などの重要な情報がハイライトされている
- 著作権表示 footer内でsmall要素が使用されている
まとめ
クイズでしっかり知識を確認できたし、実際にアクセシブルなサイトも作れました！セマンティックHTMLの大切さがよく分かりました。
特に、フォームのラベル付けや見出し構造の重要性を実感しました。これからHTMLを書くときは、常にアクセシビリティを意識したいと思います。
素晴らしい理解だね！君たちが作ったサイトは、視覚障害のある方、キーボードを使う方、高齢者の方など、様々な人が使いやすいサイトになっているんだ。これがWebの本来の姿なんだよ。
セマンティックHTML・アクセシビリティ活用のポイント
- 意味を重視 見た目ではなく内容の意味に応じて適切な要素を選択
- 論理的構造 header/main/aside/footerで明確なページ構造を作成
- 見出し階層 h1→h2→h3の順序で文書構造を表現
- 適切なラベル フォームのすべての要素に分かりやすいラベルを付与
- フォーカス管理 キーボード操作で迷子にならないナビゲーション設計
- コントラスト 十分な色のコントラストで視認性を確保
- テスト実践 実際にキーボードだけで操作して使いやすさを確認
これで第5章は完了です！次はHTMLの応用技術を学んで、さらに実践的なスキルを身につけていきましょう。
第6章では、メタタグ、マルチメディア要素、外部コンテンツ埋め込みなど、プロレベルのHTML技術を学習します。