HTML属性
属性を使って要素に追加情報を設定する方法を理解します
「HTML属性」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
マルチメディア：動画と音声を追加する
次のレッスンへようこそ！今日は、Webページに動画と音声を追加する方法を学びます。マルチメディアを使うと、ページがよりインタラクティブで楽しくなります。
マルチメディアを追加する理由
動画や音声を使うと、Webページを次のようにできます。
- より魅力的にする
- 有益で楽しいものにする
- インタラクティブにする
HTMLを使って追加する方法を学びましょう。
動画を追加する
動画は<video>タグを使って追加します。src属性で動画ファイルを指定できます。
例：
この例では、次のように指定しています。
src：動画ファイルを指定します。controls：再生、一時停止、音量のコントロールを追加します。width：動画の幅を設定します。
<video src="example.mp4" controls width="400"></video>
複数の動画形式を追加する
すべてのブラウザーが同じ動画形式に対応しているわけではありません。<source>タグを使うと、複数のソースを指定できます。
例：
<video controls width="400">
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
音声を追加する
音声は<audio>タグを使って追加します。src属性で音声ファイルを指定できます。
この例では、次のように指定しています。
src：音声ファイルを指定します。controls：再生、一時停止、音量のコントロールを追加します。
<audio src="example.mp3" controls></audio>
複数の音声形式を追加する
動画と同様に、ブラウザーとの互換性を高めるため、複数の音声ソースを指定できます。
例：
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
自動再生とループ
autoplay属性とloop属性を追加すると、動画や音声を自動再生したり、繰り返し再生したりできます。
例：
注意：ユーザー体験上の理由から、一部のブラウザーでは自動再生が無効になっている場合があります。
<audio src="example.mp3" autoplay loop></audio>
YouTube動画を埋め込む
<iframe>タグを使って、WebページにYouTube動画を埋め込めます。
例：
exampleを動画固有のIDに置き換えてください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
よくできました！
おめでとうございます！Webページへの動画や音声の追加、さらにはYouTube動画の埋め込み方法を学びました。マルチメディアを使うと、コンテンツがより動的で魅力的になります。次のレッスンでは、CSSを使ったスタイリングに進み、Webページを素晴らしい見た目にする方法を学びます。デザインの世界を探検しましょう！
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 16
- レッスン
- 35
よくある質問
「HTML属性」レッスンは無料ですか？
はい。「HTML属性」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「HTML属性」で何を学びますか？
属性を使って要素に追加情報を設定する方法を理解します ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「HTML属性」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。