プログラミング

HTMLでのコンテンツ挿入方法

最終更新： 04/03/2025
1分未満

HTMLページにコンテンツやマルチメディアを挿入する方法について、完全かつ包括的に解説します。ウェブページを魅力的にするために、テキスト、画像、音声、動画などのコンテンツを効果的に配置することは非常に重要です。それでは、HTMLを使用してどのようにこれらのコンテンツを挿入するかを見ていきましょう。

1. テキストコンテンツの挿入

HTMLページで最も基本的なコンテンツはテキストです。テキストは、段落タグや見出しタグを使用して配置します。

関連記事

段落タグ (

)

テキストの基本的な単位は段落です。段落タグを使うことで、テキストを分けて整理できます。

html
<p>これは段落のテキストです。p>

見出しタグ (

,

,

, …)

HTMLには見出しタグがあり、情報を階層的に整理するために使用します。

タグは最も重要な見出しであり、

まで続きます。

html
<h1>これは主な見出しですh1>
<h2>これはサブ見出しですh2>

2. 画像の挿入

画像は、ウェブページを視覚的に魅力的にする重要な要素です。画像を挿入するには、タグを使用します。

タグの使用

画像を挿入するためにタグを使用します。必須の属性として src と alt 属性があります。

  • src: 画像ファイルのパスを指定
  • alt: 画像が表示できない場合に代わりに表示されるテキスト
html
<img src="image.jpg" alt="画像の説明">

画像のサイズを変更するには、width と height 属性を使用できます。

html
<img src="image.jpg" alt="画像の説明" width="300" height="200">

3. リンクの挿入

リンクを挿入するには、 タグを使用します。href 属性にリンク先のURLを指定します。

html
<a href="https://www.example.com">こちらをクリックa>

リンクを新しいタブで開くには、target="_blank" 属性を追加します。

html
<a href="https://www.example.com" target="_blank">新しいタブで開くリンクa>

4. 音声の挿入

音声ファイルをウェブページに挿入するには、 タグを使用します。このタグを使うことで、ユーザーが音声を再生することができます。

音声タグの基本

html
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  お使いのブラウザは音声タグをサポートしていません。
audio>
  • controls: 音声の再生・停止・音量調整のためのコントロールを表示
  • src: 音声ファイルのパス

5. 動画の挿入

動画を挿入するには、 タグを使用します。動画にもと同様に、controls 属性で再生機能を追加できます。

動画タグの基本

html
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  お使いのブラウザは動画タグをサポートしていません。
video>
  • controls: 動画の再生・停止・音量調整のためのコントロールを表示
  • width, height: 動画の表示サイズ
  • src: 動画ファイルのパス

6. 埋め込みコンテンツ

外部サービスのコンテンツをウェブページに埋め込むには、