レッスン3：リンクと画像

⏱ 約25分やってみよう 1 クイズ 1

📋 前提知識：レッスン2：文字を表示しようを完了してください

🎯 このレッスンで学ぶこと

aタグでリンクを作れます。
imgタグで画像を表示できます。
相対パスと絶対パスの違いを説明できます。

📖 前回の復習（レッスン2）

<h1>〜<h6> で見出し、<p> で段落を作る
<br> で改行、<hr> で区切り線を入れる
<strong> で太字、<em> で斜体にできる

📖 導入 — ウェブページをもっと豊かにしよう

前のレッスンまでで、文字を表示できるようになりましたね。でも、ウェブページには文字だけでなく、リンクや画像もありますよね。このレッスンでは、そういった機能を作る方法を学びます！

📝 リンク・画像・パスの書き方

リンクタグ：`}>

リンク（anchor）を作るタグです。href 属性に移動先のアドレスを書きます。

<a href="https://www.youtube.com">YouTubeを見る</a>

<!-- 新しいタブで開く場合 -->
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">YouTubeを見る（新しいタブ）</a>

▶ プレビュー

💡 target="_blank" を使うときは、セキュリティのため rel="noopener noreferrer" を付けましょう。

画像タグ：`}>

画像を表示するタグです。終了タグは不要です。alt は必ず書きましょう（スクリーンリーダーが読み上げます）。

画像ファイル（.jpg, .png, .gif, .webp など）を表示できます。Web では .webp が軽量でおすすめです。

<img src="cat.jpg" alt="かわいい猫の写真">

💡 このコード例の cat.jpg は架空のファイル名です。実際には「やってみよう」で用意した自分の画像ファイルのパスを書いてください。（例：images/photo.jpg）

▶ プレビュー

💡 画像サイズの制御:
画像が大きすぎるときは width 属性でサイズを指定できます:
<img src="photo.jpg" alt="写真" width="300">
height を省略すると、縦横比を保ったまま縮小されます。

CSSで max-width: 100% を指定すると、画面幅に合わせて自動縮小されます（レスポンシブ対応）:
img { max-width: 100%; height: auto; }

ページ内リンク

href="#id名" と書くと、同じページ内の特定の場所にジャンプできます。

<!-- リンク元（目次） -->
<ul>
  <li><a href="#profile">プロフィール</a></li>
  <li><a href="#hobby">趣味</a></li>
</ul>

<!-- リンク先（id属性をつける） -->
<h2 id="profile">プロフィール</h2>
<p>名前は田中です。</p>

<h2 id="hobby">趣味</h2>
<p>ゲームが好きです。</p>

長いページで目次を作るときに便利です。クリックするとその場所までスクロールします。

▶ プレビュー

💡 id は1ページに1つだけ:
同じ id を複数の要素につけてはいけません。id="profile" はページ内で1つだけ使えます。

相対パスとは？

今開いているファイルの場所を起点にした、他のファイルへの道順のことです。

同じフォルダ内の画像：photo.jpg
1つ上のフォルダ：../photo.jpg
子フォルダ内：images/photo.jpg

📁 フォルダ構造で理解しよう:

📁 my-website/
├── index.html　　← 今いる場所
├── 📁 images/
│　　└── photo.jpg　← images/photo.jpg
└── 📁 pages/
　　　└── about.html　← pages/about.html

index.html から見て、photo.jpg は「images フォルダの中」にあるので images/photo.jpg と書きます。

📁 ../（1つ上に戻る）の例:

📁 my-website/
├── 📁 pages/
│　　└── about.html　← 今いる場所
└── 📁 images/
　　　└── photo.jpg　← ../images/photo.jpg

about.html から photo.jpg を指定するには、まず ../ で1つ上（my-website）に戻り、そこから images/photo.jpg と進みます。

💡 ../ は「1階上に戻る階段」と覚えよう！
../ を1つ書くたびに1階上のフォルダに戻ります。2階上なら ../../ です。

絶対パスとは？

ウェブ上の住所（URL）をそのまま書いたものです。どこから書いても同じ場所を指します。

例：https://example.com/photo.jpg

相対パスと絶対パスの使い分け

種類	書き方	使いどころ
絶対パス	`https://...` から始まる	外部サイトの画像・リンク
相対パス	ファイル名や `フォルダ名/` から始まる	自分のフォルダ内のファイル

💻 やってみよう！

フォルダと画像を用意する
1. VS Codeで my-practice フォルダを開く
2. my-practice フォルダの中に images フォルダを作る（左のサイドバーで「新しいフォルダ」アイコンをクリック）
3. 好きな画像を用意する（スクリーンショットを撮るか、フリー素材サイト Unsplash から1枚ダウンロード）
4. 用意した画像ファイルを photo.jpg という名前に変更して images フォルダに入れる（ファイルを右クリック→「名前の変更」）
5. my-practice フォルダに index.html という新しいファイルを作る

コードを書く

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>リンクと画像の練習</title>
  </head>
  <body>
    <h1>リンクと画像</h1>

    <h2>リンクの例</h2>
    <p><a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Googleを開く</a></p>

    <h2>画像の例</h2>
    <img src="images/photo.jpg" alt="わたしのお気に入りの写真">
  </body>
</html>

ブラウザで確認する
リンクをクリックすると新しいタブでGoogleが開けば成功です！ 🎉

自由課題:

好きなサイトへのリンクを3つ追加してみよう
画像に width="200" を追加してサイズを変えてみよう
ページ内リンク（href="#section" + id="section"）を試してみよう
同じフォルダに別の HTML ファイルを作り、相対パスでリンクしてみよう

⚠️ よくあるミス

img タグに alt を書き忘れる：alt は画像が表示できないときの代わりのテキストです。スクリーンリーダーも読み上げるので、必ず書きましょう。
画像のパスが間違っている：画像が表示されないときは、ファイル名やフォルダ名のスペルを確認しましょう。大文字・小文字の違いもエラーの原因になります。
a タグの href を書き忘れる：<a>テキスト</a> だけではリンクになりません。href="URL" を忘れずに書きましょう。
ページ内リンクの id が一致しない：href="#profile" と id="Profile" は大文字小文字が違うのでジャンプしません。完全に一致させましょう。