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

はじめに
●HTMLでの別ファイル埋め込みとは？
●埋め込む方法10選
●埋め込み方法の使い方、対処法、注意点、カスタマイズ
●各方法の応用例とサンプルコード
まとめ

はじめに

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

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

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

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

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

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

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

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

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

●埋め込む方法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タグは、主にプラグインコンテンツを埋め込むためのタグです。

SVGファイルやFlashコンテンツなどの外部ファイルを表示する際に使用されます。

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

○videoタグを使った方法

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

別の動画ファイルを表示させることができ、HTML5で推奨される方法となっています。

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

○audioタグを使った方法

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

別の音声ファイルを再生することが可能で、HTML5標準の方法です。

<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>