猪狩進
画像を1枚入れるだけで、Webページの雰囲気はガラリと華やかになるよ！
ここでは
ここでは
<img> タグの使い方と、画像ファイルを読み込むための「相対パス」の書き方をマスターしよう！
1. 画像を表示する <img> タグの基本
画像を表示するには <img> タグを使います。このタグには閉じタグ（</img>）が不要なのが特徴です。
基本構文
<img src="画像の場所" alt="画像の説明">| 属性名 | 読み方 | 進くんの解説 |
|---|---|---|
src |
ソース | 画像の住所（ファイルパス）を指定する場所だよ。ここが間違っていると画像が表示されないんだ。 |
alt |
オルト | 「画像の説明テキスト」だよ。電波が悪くて画像が読み込めない時や、目が不自由な方の音声読み上げで使われる大切なマナーなんだ！ |
2. つまずきやすい「相対パス」の考え方
相対パスとは、「今開いているHTMLファイルから見て、画像ファイルがどこにあるか」という案内ルートのことです。
パターンA：同じフォルダにある場合
HTMLファイルと画像ファイルが同じ階層にある場合は、ファイル名をそのまま書きます。
<img src="hero.webp" alt="主将の笑顔">パターンB：子フォルダ（images）の中にある場合
Web制作では画像を images という名前のフォルダにまとめるのが一般的です。その場合は フォルダ名/ファイル名 と指定します。
<img src="images/hero.webp" alt="主将の笑顔">💡 進くんのワンポイント・アドバイス
画像が「1つ上の階層のフォルダ」にある場合は、../ を頭につけて ../images/hero.webp のように指定するよ。「../ は1個上の部屋に戻る記号」と覚えておこう！
3. 実践コードサンプル
画像に幅（width）や高さ（height）を指定して、綺麗にレイアウトしてみましょう。
index.html
<h1>あかつき大附属高校野球部・ギャラリー</h1>
<h2>エースの熱投！</h2>
<p>決勝戦での力投シーンです。</p>
<!-- 画像の表示（横幅と高さを指定） -->
<img src="images/pitcher.webp" alt="マウンドで投球するエース" width="300" height="200">
パスの書き方はバッチリかな？
画像が貼れるようになったら、次は「他のページや別のサイトへ飛ぶリンク」を作ってみよう！第4章へ進もう！
画像が貼れるようになったら、次は「他のページや別のサイトへ飛ぶリンク」を作ってみよう！第4章へ進もう！