【3つの方法】静的HTMLで共通ヘッダー/フッターを実装する方法 (HTMLのインクルード、JavaScript、SSI)

2024-04-03

静的HTMLで共通ヘッダー/フッターを実装する方法

HTMLのインクルード

これは、最もシンプルで初心者にもおすすめの方法です。共通部分のHTMLコードを別ファイルに保存し、各ページで``のような記述を使って読み込みます。

メリット:

簡単で分かりやすい
コード量が減り、管理が楽になる

ファイル数が多くなると管理が煩雑になる
編集時にすべてのページを開く必要がある

JavaScriptによるインクルード

JavaScriptを使って、共通部分のHTMLコードを動的に読み込む方法です。

ファイル数を減らせる

JavaScriptの知識が必要
複雑な処理になる可能性がある

サーバーサイドインクルード (SSI)

サーバー側で共通部分のHTMLコードを埋め込む方法です。

サーバーの設定が必要
すべてのレンタルサーバーで利用できるわけではない

上記3つの方法のメリットとデメリットを比較して、自分のサイトに合った方法を選びましょう。

その他の注意点

共通ヘッダー/フッターにJavaScriptやCSSを使用する場合は、各ページで読み込む必要があることに注意しましょう。
共通ヘッダー/フッターの内容を変更した場合は、すべてのページに反映されることを確認しましょう。

静的HTMLで共通ヘッダー/フッターを実装するには、いくつかの方法があります。それぞれのメリットとデメリットを理解し、自分のサイトに合った方法を選びましょう。

<h1>サイト名</h1>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index Page</title>
</head>
<body>
  <?php include 'header.html'; ?>

  <main>
    <h1>Index Page</h1>
    <p>これはインデックスページです。</p>
  </main>

  <?php include 'footer.html'; ?>
</body>
</html>

<footer>
  <p>Copyright &copy; 2023</p>
</footer>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index Page</title>
</head>
<body>
  <div id="header"></div>
  <main>
    <h1>Index Page</h1>
    <p>これはインデックスページです。</p>
  </main>
  <div id="footer"></div>

  <script>
    // header.html を読み込む
    const headerEl = document.getElementById('header');
    fetch('header.html')
      .then(response => response.text())
      .then(html => headerEl.innerHTML = html);

    // footer.html を読み込む
    const footerEl = document.getElementById('footer');
    fetch('footer.html')
      .then(response => response.text())
      .then(html => footerEl.innerHTML = html);
  </script>
</body>
</html>

<h1>サイト名</h1>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<footer>
  <p>Copyright &copy; 2023</p>
</footer>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index Page</title>
</head>
<body>
  <main>
    <h1>Index Page</h1>
    <p>これはインデックスページです。</p>
  </main>

  </body>
</html>

<h1>サイト名</h1>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<footer>
  <p>Copyright &copy; 2023</p>
</footer>