STEP 5：画像・リンクの実装

このステップの目的

Webページに画像やリンクを正しく挿入し、見た目だけでなく使い勝手も整えることを目指します。

---

checklistやることリスト

• <img> タグで画像を表示
• alt 属性に代替テキストを設定
• <a> タグでリンクを設定（内部／外部）
• ボタン風リンクやバナーリンクを作る

---

tips_and_updatesポイント解説

1. 画像の挿入

<img src="images/photo.jpg" alt="商品の写真">

• src：画像ファイルのパス（images/ フォルダ内など）
• alt：読み上げや代替表示用テキスト。必ず書く

2. 画像の大きさ調整

img {
  max-width: 100%;
  height: auto;
  display: block;
}

• max-width:100% で親要素幅をはみ出さず自動縮小
• display:block にすると、下に余白ができず扱いやすい

3. リンクの基本

<a href="about.html">会社案内を見る</a>

• href：リンク先のURLまたはファイルパス
• 内部リンクは相対パス、外部リンクは https://… を指定

4. 外部リンクを別タブで開く

<a href="https://example.com" target="_blank" rel="noopener">公式サイトへ</a>

• target=”_blank”：新しいタブで開く
• rel=”noopener”：セキュリティ／パフォーマンス対策

かんたんコード例

<!-- 画像表示 -->
<section>
  <h2>商品イメージ</h2>
  <img src="images/item.jpg" alt="新商品イメージ写真">
</section>

<!-- ボタン風リンク -->
<a href="contact.html" class="btn">お問い合わせはこちら</a>

/* ボタン風リンク */
.btn {
  display: inline-block;
  background-color: #3498db;
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  text-decoration: none;
}
.btn:hover {
  background-color: #2980b9;
}

---

warningよくある間違いと対策

src のパスを間違える

フォルダ構成とファイル名を再確認しましょう。

alt を書かない

アクセシビリティ向上のため、必ず設定しましょう。

<a> タグ内に要素を入れすぎる

ブロック要素はリンク内に入れず、ボタン化するなど工夫しましょう。

外部リンクで target="_blank" を忘れる

新しいタブで開きたい場合は必ず指定しましょう。

---

---