HTML コース
✓ ✓ ✓ 3 4 5 6
3 STEP 3 / 7

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

⏱ 約30分 やってみよう 1 クイズ 3
📋 前提知識：レッスン2：文字を表示しようを完了してください

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

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

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

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

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

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

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

リンクタグ：<a>

リンク（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" を付けましょう。

画像タグ：<img>

画像を表示するタグです。終了タグは不要です。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. フォルダと画像を用意する
    1. VS Codeで my-practice フォルダを開く
    2. my-practice フォルダの中に images フォルダを作る（左のサイドバーで「新しいフォルダ」アイコンをクリック）
    3. 好きな画像を用意する（スクリーンショットを撮るか、フリー素材サイト Unsplash から1枚ダウンロード）
    4. 用意した画像ファイルを photo.jpg という名前に変更して images フォルダに入れる（ファイルを右クリック→「名前の変更」）
    5. my-practice フォルダに index.html という新しいファイルを作る
  2. コードを書く
    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>
  3. ブラウザで確認する
    リンクをクリックすると新しいタブでGoogleが開けば成功です！ 🎉
AIレビューを受ける

書いたコードを、Gemini か ChatGPT に見てもらおう。答えを教えてもらうのではなく、良い点と改善点を1つずつ確認する使い方だよ。

Step 1プロンプトをコピー
Step 2開いて貼り付ける
ChatGPTを開く → Geminiを開く →

※ ChatGPTは自動で入力されるよ。Geminiは環境によって自動で入らないことがあるので、その場合は貼り付けてね。

⚠️ 名前・学校名・住所などの個人情報はAIに入力しないでね。 書いたコード以外の個人的な内容は書かないようにしよう。 保護者の方はこちらもご覧ください。

自由課題:

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

自由課題を、AIにヒントをもらいながら進めよう。完成コードはもらわず、自分の手で書くのがポイント。

Step 1プロンプトをコピー
Step 2開いて貼り付ける
ChatGPTを開く → Geminiを開く →

※ ChatGPTは自動で入力されるよ。Geminiは環境によって自動で入らないことがあるので、その場合は貼り付けてね。

⚠️ 名前・学校名・住所などの個人情報はAIに入力しないでね。 書いたコード以外の個人的な内容は書かないようにしよう。 保護者の方はこちらもご覧ください。

⚠️ よくあるミス

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

📌 まとめ

タグ役割
<a href="...">リンク。クリックで別のページに移動する
<img src="..." alt="...">画像を表示する。終了タグは不要
  • ✅ target="_blank" を追加すると新しいタブで開く
  • ✅ alt は必ず書く（アクセシビリティのため）
  • ✅ 外部サイトは絶対パス（https://...）、自分のファイルは相対パスで指定する
  • ✅ href="#id" でページ内リンクが作れる
  • ✅ 画像サイズは width 属性や CSS で制御する

✨ a タグや img タグの動きをその場で確認しよう！

リンクや画像タグの属性を変えながら、表示の変化をリアルタイムで確認できる無料ツールです。

HTMLタグビジュアライザー →
理解度クイズをAIに出してもらう

このレッスンの内容から3問、AIに出題してもらおう。間違えても大丈夫、解説つきで教えてくれるよ。

Step 1プロンプトをコピー
Step 2開いて貼り付ける
ChatGPTを開く → Geminiを開く →

※ ChatGPTは自動で入力されるよ。Geminiは環境によって自動で入らないことがあるので、その場合は貼り付けてね。

⚠️ 名前・学校名・住所などの個人情報はAIに入力しないでね。 書いたコード以外の個人的な内容は書かないようにしよう。 保護者の方はこちらもご覧ください。

🚀 次のレッスンへ

次のレッスンでは、リストと表を使って情報を整理する方法を学びます！

🔍 もっと調べてみよう：「HTML リンク 画像 書き方」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！

✅ このレッスンが終わったら

ドリルで知識を確認してから次に進むと、理解が定着しやすいよ！

次のレッスン: リストと表 → 📝 このレッスンの問題を解く →

このレッスンは役に立ちましたか？

目次

    📖 このレッスンの用語

    ⚠️ よくあるエラー

    📝 関連ブログ記事

    🏋️ 練習問題

    このレッスンの練習問題に挑戦（Q15〜Q19）→

    📋 チートシート

    チートシートを見る →
    ← HTML コース一覧に戻る
    𝕏 シェア LINE シェア
    次のレッスン: リストと表 →