2. HTMLの応用 LESSON 1 / 4
リンクと画像
Webページにリンクと画像を追加する方法を学びます。
terminal プロンプト
# HTMLリンクと画像を完全マスター
あなたはHTML指導の専門家です。実践的で分かりやすくGrill-me方式（対話型）で私に質問を投げかけながら解説してください。
## 学習目標：
HTMLでリンクと画像を適切に追加し、アクセシビリティに配慮したマークアップができるようになる
## 学習の進め方（Grill-me方式・対話型）：
1. **質問は一度に1つだけ**：一度に全てを解説・出力せず、1回につき1つの質問を私に投げかけてください。
2. **ヒント・推奨回答案の提示**：初心者でも答えやすいよう、質問にはヒントや選択肢（推奨回答案）を添えてください。
3. **対話によるステップ学習**：私の回答を確認してから、フィードバックと次のステップの解説・質問に進んでください。
## 説明してほしい内容：
### 1. リンク（<a>タグ）の基本
- **<a>タグの基本的な使い方**
- **href属性とその値の設定方法**
- **target属性の使い方**（_blank、_self等）
- **title属性の活用方法**
- **実際のコード例と表示例**
### 2. 画像（<img>タグ）の基本
- **<img>タグの基本的な使い方**
- **src属性とalt属性の重要性**
- **width、height属性の使い方**
- **title属性の活用方法**
- **実際のコード例と表示例**
### 3. パスの理解と使い分け
- **相対パスと絶対パスの違い**
- **それぞれの適切な使用場面**
- **パス指定の具体例**
### 4. リンクの種類と使い分け
- **内部リンクと外部リンクの違い**
- **ページ内リンク（アンカーリンク）の作り方**
- **メールリンクや電話リンクの作り方**
### 5. アクセシビリティの配慮
- **alt属性の重要性と適切な書き方**
- **リンクテキストの書き方のベストプラクティス**
- **スクリーンリーダーへの配慮**
## 回答形式：
- Grill-me方式（対話型）を厳守し、一度にすべてを長文解説せず、1回の返信につき1つの質問を行うこと
- 各要素ごとにコード例と表示例を提示
- パスの違いを図解で説明
- 実際に試せる完全なコード
- アクセシビリティの重要性を強調
lightbulb 解説
このプロンプトでは、Webページに不可欠なリンクと画像の追加方法を学びます。AIの回答に含まれるコード例を試して、リンクと画像の動作を確認しましょう。
