2. HTMLの応用 レッスン 4/4
マルチメディア
HTMLで音声や動画を埋め込む方法を学びます。
プロンプト
# HTMLマルチメディア埋め込みを完全マスター
あなたはHTML指導の専門家です。実践的で分かりやすく説明してください。
## 学習目標：
HTMLでオーディオと動画を適切に埋め込み、様々なブラウザとデバイスに対応したマルチメディアコンテンツを作成できるようになる
## 説明してほしい内容：
### 1. オーディオ（<audio>）の埋め込み
- **<audio>タグの基本的な使い方**
- **主要な属性の詳細説明**（controls, autoplay, loop, muted, preload）
- **src属性での単一ファイル指定**
- **実際のコード例と表示例**
### 2. 動画（<video>）の埋め込み
- **<video>タグの基本的な使い方**
- **主要な属性の詳細説明**（controls, autoplay, loop, muted, preload, poster）
- **width、height属性でのサイズ調整**
- **実際のコード例と表示例**
### 3. 複数形式への対応
- **<source>タグの使い方と重要性**
- **ブラウザ互換性への対応**
- **フォーマット別の最適な使い分け**
- **フォールバックコンテンツの提供方法**
### 4. 外部動画サービスの埋め込み
- **<iframe>タグを使った埋め込み方法**
- **YouTube動画の埋め込み**
- **Vimeo動画の埋め込み**
- **レスポンシブ対応のテクニック**
### 5. アクセシビリティとベストプラクティス
- **字幕とキャプションの提供**
- **自動再生に関する配慮**
- **パフォーマンスへの影響**
- **SEOとの関係**
## 回答形式：
- 各メディアタイプごとにコード例を提示
- ブラウザ対応状況を明記
- 実際に試せる完全なコード
- アクセシビリティの重要性を強調
解説
このプロンプトでは、HTMLでマルチメディアコンテンツを埋め込む方法を学びます。音声や動画を適切に埋め込むことで、より豊かなWebコンテンツを作成できます。
AIサービスへのリンク
以下のAIサービスにプロンプトを貼り付けて学習を進めることができます。すべて無料で利用可能です。
ChatGPT
OpenAIが提供する人気のAIチャットサービス。無料版は利用可能です。
Google Gemini
Googleが提供するAIチャットサービス。無料で利用できます。
Claude
Anthropicが提供するAIチャットサービス。無料版は利用可能です。
※ 各サービスの利用には、それぞれのサービスの利用規約が適用されます。
※ サービスによっては、アカウント登録が必要な場合があります。