HTMLで別ファイルを簡単に埋め込む方法10選！

はじめに
HTMLでの別ファイル埋め込みとは？
埋め込む方法10選
各方法の応用例とサンプルコード
まとめ

はじめに

この記事を読めば別ファイルをHTMLに埋め込むことができるようになります。

HTMLの埋め込み方法を知りたいけれども、どこから始めたらいいかわからないと感じる初心者の方に向けた記事です。

今回は、HTMLで別ファイルを埋め込む方法を10種類、初心者目線でわかりやすく解説します。

使い方や注意点、カスタマイズ方法も豊富に紹介しています。

さらに、応用例とサンプルコードもご紹介しますので、ぜひ最後までお読みください。

HTMLでの別ファイル埋め込みとは？

HTMLで別ファイルを埋め込むとは、あるHTMLファイルの中に別のHTMLファイルや画像・動画・音声などのメディアファイルを表示させることです。

この方法を使うことで、より効率的にウェブページを構築したり、コンテンツを見やすく整理することができます。

今回は、そんなHTMLでの別ファイル埋め込みの方法を10選ご紹介します。

埋め込む方法10選

iframeを使った方法

iframeは、別のHTMLファイルを埋め込むためのタグです。

iframeを使うことで、簡単に別のウェブページやコンテンツを表示させることができます。

<iframe src="example.html" width="300" height="200"></iframe>

objectタグを使った方法

objectタグは、画像や動画、音声などのメディアファイルを埋め込むことができるタグです。

このタグを使って別ファイルを表示させることができます。

<object data="example.pdf" type="application/pdf" width="300" height="200"></object>

embedタグを使った方法

embedタグは、外部ファイルを埋め込むためのタグで、動画や音声ファイルを表示させることができます。

<embed src="example.mp4" width="300" height="200" type="video/mp4">

videoタグを使った方法

videoタグは、動画ファイルを埋め込むためのタグです。

別の動画ファイルを表示させることができます。

<video src="example.mp4" width="300" height="200" controls></video>

audioタグを使った方法

audioタグは、音声ファイルを埋め込むためのタグです。

別の音声ファイルを表示させることができます。

<audio src="example.mp3" controls></audio>

imgタグを使った方法

imgタグは、画像ファイルを埋め込むためのタグです。

別の画像ファイルを表示させることができます。

<img src="example.jpg" alt="example image">

scriptタグを使った方法

scriptタグは、JavaScriptファイルを埋め込むためのタグです。

別のJavaScriptファイルを表示させることができます。

<script src="example.js"></script>

linkタグを使った方法

linkタグは、CSSファイルを埋め込むためのタグです。

別のCSSファイルを表示させることができます。

<link rel="stylesheet" href="example.css">

AJAXを使った方法

AJAXは、非同期通信を行うための技術です。

これを利用することで、ページをリロードすることなく、動的に別ファイルを表示させることができます。

<div id="content"></div>
<script>
  function loadContent() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("content").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "example.html", true);
    xhttp.send();
  }
  loadContent();
</script>

PHPを使った方法

PHPは、サーバーサイドのプログラミング言語です。

これを使って、HTMLファイルに別ファイルを埋め込むことができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PHP Example</title>
</head>
<body>
  <?php include 'example.html'; ?>
</body>
</html>

埋め込み方法の使い方、対処法、注意点、カスタマイズ上記で紹介した埋め込み方法は、それぞれのファイルタイプや用途によって適切なものを選ぶことが重要です。

また、埋め込む際には、ファイルパスやサイズ指定などの注意点もあるため、それぞれの方法の使い方や対処法を理解しておくことが大切です。

各方法の応用例とサンプルコード

iframeを使って、別のウェブページの一部を表示させる。

<iframe src="https://example.com/some-page" width="300" height="200"></iframe>

objectタグで、PDFファイルを表示させる。

<object data="example.pdf" type="application/pdf" width="300" height="200"></object>

embedタグで、SVGファイルを表示させる。

<embed src="example.svg" width="300" height="200" type="image/svg+xml">

videoタグで、動画に字幕ファイルを追加する。

<video src="example.mp4" width="300" height="200" controls>
  <track src="example.vtt" kind="subtitles" srclang="en" label="English">
</video>

audioタグで、複数の音源を指定する。

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

imgタグで、レスポンシブ対応の画像を表示させる。

<img src="example-small.jpg" alt="example image" srcset="example-small.jpg 320w, example-medium.jpg 480w, example-large.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px">

scriptタグで、jQueryライブラリを読み込む。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

linkタグで、Google Fontsを読み込む。

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

AJAXを使って、フォーム送信後に別のコンテンツを表示させる。

<form id="myForm">
  <input type="text" name="example" placeholder="Enter text here">
  <input type="submit" value="Submit">
</form>
<div id="content"></div>
<script>
  document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("content").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "example.html", true);
    xhttp.send();
  });
</script>

PHPを使って、ナビゲーションメニューを共通化する。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PHP Example</title>
</head>
<body>
  <?php include 'navigation.php'; ?>
  <main>
    <!-- main content goes here -->
  </main>
  <?php include 'footer.php'; ?>
</body>
</html>