第2章でリンクと画像について色々学んだけど、ちゃんと理解できてるか確認したいです！
それなら実践的なクイズで確認してみよう！リンクの作り方や画像の表示方法、そしてそれらを組み合わせた実際のWebサイト作りまで、段階的に確認していこう。
クイズの後は、実際にリンクと画像を使ったサイトを作ってみたいです！
その意気だね！リンクと画像の使い分けは、実際のサイト作りでとても重要になるんだ。まずはクイズで基礎知識を確認して、そのあとで本格的なポートフォリオサイト作りに挑戦してみよう
第2章まとめクイズ
第2章の重要ポイントを12問に凝縮した総合クイズだ。リンク・パス・セキュリティ・画像とアクセシビリティの核心が網羅されているよ。内容はこれまで出てきた問題そのままだから、落ち着いて解いてみよう。
第2章 総合まとめクイズ（12問）
my-website/
├── index.html
├── pages/
│ └── about.html ← ここから参照
└── images/
└── logo.png<a ①="https://www.google.com">Googleで検索</a><!-- ジャンプ先 -->
<h2 id="section1">第1章</h2>
<!-- リンク部分 -->
<a href="①">第1章へ</a><a href="https://example.com" ①>外部サイト</a><a href="①">メール送信</a><img ①="photo.jpg" ②="美しい風景写真"><img src="cat.jpg" alt="①"><img src="photo.jpg" alt="風景" width="300" height="200">実践：リンクと画像を活用した2ページサイト作成
このセクションでは、第2章で学んだリンクと画像の知識を使って、サイト内リンクのある2ページ構成のサイトを作成します。PNG・JPEGの使い分けやwidth・height属性も正しく使って、レイアウトシフトを防止することも意識してみましょう。
以下のリンクから圧縮ファイルをダウンロードして、解凍すると、実践で使用するファイルが展開されます。
ファイルのダウンロードただし、実際に自分でコードを書いてみることが最も効果的な学習方法なので、以下を参考にまずは自分で実装してみてください！
HTMLファイルの作成手順
まず、作成するファイルの全体構成を確認しましょう。
html-practice/
└── chapter2/
├── index.html (プロフィールページ)
├── portfolio.html (作品紹介ページ)
└── images/ (画像フォルダ)
├── logo.png (ロゴ画像 - PNG)
└── work1.jpg (作品画像 - JPEG)「HTMLファイルを作ってみよう！」で作成した「html-practice」フォルダーをVS Codeで開きましょう。
HTMLファイルを作成するための手順を確認しましょう。
- VS Codeの「ファイル」→「フォルダーを開く」でデスクトップの「html-practice」フォルダーを選択してください。
- 「chapter2」フォルダを作成します
- 「chapter2」フォルダ内に新しいファイル「index.html」と「portfolio.html」を作成します
- 「chapter2」フォルダ内に「images」フォルダを作成します
実践で使用する画像素材の準備
実践では以下の2つの画像を使用します。各画像をクリックしてダウンロードし、 手順で作成した「images」フォルダに配置してください。
logo.png
120×120px
正方形ロゴ（PNG形式）
work1.jpg
400×300px
作品紹介用画像（JPEG形式）
画像のダウンロード手順
- 画像をクリック 「名前を付けて画像を保存」を選択
- 指定されたファイル名で保存 logo.png、work1.jpgの名前で保存
- 保存先を確認 html-practice/chapter2/images/ フォルダー内に配置
メインページ（index.html）の作成
まずはメインページを作ってみよう。PNG形式のロゴとJPEG形式のプロフィール写真を使い分けて、width・height属性も正しく指定しよう。
実装手順と確認ポイント
- index.htmlの基本構造作成
<!DOCTYPE html>から始まり、head部分でタイトルを「田中太郎 - プロフィール」に設定する - ヘッダー部分の実装 logoへのimgタグ（width=“120” height=“120”）とナビゲーションメニューを作成する
- メインコンテンツの記述 h1でタイトル、基本情報、portfolio.htmlへのリンクを作成する
- 連絡先リンクの追加 mailto:、tel:、外部サイト（target=“_blank”）のリンクを実装する
作品紹介ページ（portfolio.html）の作成
次は作品紹介ページを作ってみよう。サイト内リンクとページ内リンクを効果的に使ってみよう。
実装手順と確認ポイント
- portfolio.htmlの作成 index.htmlと同様の構造で、ページ内リンク用の目次を追加する
- 作品セクションの実装 id属性付きのsectionタグで、work1.jpgの画像とdownload属性を設定する
- ブラウザでの表示確認 両ページをブラウザで開き、すべてのリンクをクリックして動作を確認する
- 最終チェック alt属性の内容、ファイルパス、画像サイズが正しく設定されているか確認する
チェックリスト
- 画像形式の適切な選択 PNG（ロゴ）・JPEG（写真）の使い分け
- width・height指定 画像のアスペクト比を正しく事前指定
- サイト内リンク ページ間の移動が正しく動作
- ページ内リンク 目次から該当箇所へのジャンプが正しく動作
- 外部リンク設定 target=“_blank”で新しいタブで開く
- 特殊リンク活用 mailto:とtel:で連絡手段を提供
- 画像のalt属性 すべての画像に適切で具体的な代替テキスト
- ナビゲーション一貫性 全ページで同じナビゲーション構造
まとめ
お疲れ様！第2章のクイズと実践演習、両方ともよく頑張ったね。リンクと画像を組み合わせた本格的なサイト作りはどうだった？
クイズで基礎知識を確認してから実践に進むと、「あ、これクイズで出た内容だ！」って繋がりを感じられて良かったです！特にalt属性の大切さがよく分かりました。
複数ページのサイトを作ってみて、ナビゲーションの重要性がよく分かりました！リンクの種類もたくさんあって、使い分けが楽しかったです。
素晴らしい！今回の学習で、Webサイトの基本的な構成要素であるリンクと画像を使いこなせるようになったね。これで本格的なWebサイト制作の基盤ができたよ。
- パス理解 相対パスと絶対パスを適切に使い分けられる
- リンク作成 aタグを使って様々なタイプのリンクを作成できる
- 特殊リンク mailto:、tel:、download属性を活用できる
- 画像表示 imgタグで適切なalt属性付きの画像を表示できる
- ナビゲーション設計 使いやすいサイト構造を設計できる
- アクセシビリティ 全てのユーザーに配慮したマークアップができる
- 実践力 学んだ知識を統合して本格的なWebサイトを作成できる
第3章では、リストと表の作成方法を学びます。情報を整理して見やすく表示する技術をマスターして、より充実したWebサイトを作れるようになりましょう！