🚀 プログラミング学習

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

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

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

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

リンクタグ：<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 は必ず書きましょう（スクリーンリーダーが読み上げます）。

<img src="cat.jpg" alt="かわいい猫の写真">
📖 相対パスとは：今開いているファイルの場所を起点にした、他のファイルへの道順のこと。例：同じフォルダ内の画像なら photo.jpg、1つ上のフォルダなら ../photo.jpg と書く。
📖 絶対パスとは：ウェブ上の住所（URL）をそのまま書いたもの。どこから書いても同じ場所を指す。例：https://example.com/photo.jpg

相対パスと絶対パス

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

💻 やってみよう！

  1. フォルダと画像を用意する
    practice フォルダの中に images フォルダを作り、好きな画像を photo.jpg という名前で入れます。
  2. コードを書く 
    <!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が開けば成功です！ 🎉

📌 まとめ

タグ役割
<a href="...">リンク。クリックで別のページに移動する
<img src="..." alt="...">画像を表示する。終了タグは不要

🚀 次のレッスンへ

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

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