2. HTMLの応用 レッスン 1/4
リンクと画像
Webページにリンクと画像を追加する方法を学びます。
プロンプト
# HTMLリンクと画像を完全マスター
あなたはHTML指導の専門家です。実践的で分かりやすく説明してください。
## 学習目標：
HTMLでリンクと画像を適切に追加し、アクセシビリティに配慮したマークアップができるようになる
## 説明してほしい内容：
### 1. リンク（<a>タグ）の基本
- **<a>タグの基本的な使い方**
- **href属性とその値の設定方法**
- **target属性の使い方**（_blank、_self等）
- **title属性の活用方法**
- **実際のコード例と表示例**
### 2. 画像（<img>タグ）の基本
- **<img>タグの基本的な使い方**
- **src属性とalt属性の重要性**
- **width、height属性の使い方**
- **title属性の活用方法**
- **実際のコード例と表示例**
### 3. パスの理解と使い分け
- **相対パスと絶対パスの違い**
- **それぞれの適切な使用場面**
- **パス指定の具体例**
### 4. リンクの種類と使い分け
- **内部リンクと外部リンクの違い**
- **ページ内リンク（アンカーリンク）の作り方**
- **メールリンクや電話リンクの作り方**
### 5. アクセシビリティの配慮
- **alt属性の重要性と適切な書き方**
- **リンクテキストの書き方のベストプラクティス**
- **スクリーンリーダーへの配慮**
## 回答形式：
- 各要素ごとにコード例と表示例を提示
- パスの違いを図解で説明
- 実際に試せる完全なコード
- アクセシビリティの重要性を強調
解説
このプロンプトでは、Webページに不可欠なリンクと画像の追加方法を学びます。AIの回答に含まれるコード例を試して、リンクと画像の動作を確認しましょう。
AIサービスへのリンク
以下のAIサービスにプロンプトを貼り付けて学習を進めることができます。すべて無料で利用可能です。
ChatGPT
OpenAIが提供する人気のAIチャットサービス。無料版は利用可能です。
Google Gemini
Googleが提供するAIチャットサービス。無料で利用できます。
Claude
Anthropicが提供するAIチャットサービス。無料版は利用可能です。
※ 各サービスの利用には、それぞれのサービスの利用規約が適用されます。
※ サービスによっては、アカウント登録が必要な場合があります。