簡単！HTMLの共通部分を別ファイルにして多数ページで共通化

公開：2020-05-04

(2015-07-26の改訂版)

ブログやホームページのメニューやサイドバーなど、全ページ変更は大変ですよね。

そこで、HTMLの同じ部分を別ファイルにし、多数ページで共通化する方法です。1ファイルのみの変更で全ページに反映されるので管理が楽になります。

grep機能で全ファイル一括書換も大変、PHPは詳しくない、そんな方におすすめな簡単な方法です。jQueryを使いますがその知識も不要で、HTMLの基本的知識さえあればできるように書いています。

また、CSSとの関係、中級者さん向けに動的要素の注意も述べています。

共通化する方法

このページで以下のHTMLファイルが出てきますのでお間違えなく。

org.html: 元のオリジナル及び変更後のページ
menu.html: 全ページ共通のメニュー部分

共通部分がヘッダーでしたらheader.html、サイドバーでしたらsidebar.html、フッターでしたらfooter.htmlなどでけっこうです。

メニューファイルの作成

先ず内容や広告などのない、HTMLとして最低限のものを menu.html として作ります。bodyタグ内は空です。例えばこんな感じです。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>共通メニュー</title>
</head>

<body>
</body>

</html>

枠内をダブルクリックすると全選択されますので、すぐにコピペ可能です。

次に、すでに完成されているオリジナルの org.html の共通部分のみ（ここではメニューのul）を切り取り、先程 menu.html の空body内に貼ります。ul以外にdivなどで複数の要素をまとめてでもいいです。

すでにidがあればそのままで、なければつけます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>共通メニュー</title>
</head>

<body>
  <ul id="out-box">
    <li>メニュー１</li>
    <li>メニュー２</li>
    <li>メニュー３</li>
  </ul>
</body>

</html>

オリジナルファイルの変更

org.html の切り取った部分に空divとidをつけます。すでにある場合はそのままでけっこうです。

また、bodyタグ内最後にスクリプトを貼ります。idが違う場合はご自分のものに書き換えてください。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>オリジナル</title>
</head>

<body>
  <div id="in-box">
  </div>

  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.js"></script>
  <script>
  $(function(){
    $('#in-box').load('menu.html #out-box');
  });
  </script>
</body>

</html>

すでにjQueryをお使いでしたら、src="～" はお好みのCDNやファイル名に替えてけっこうです。よくわからないという方はそのままコピペで大丈夫です。

アップロード

org.html と menu.html をアップロードし、前者を見てみてください。

org.html が読み込まれると in-box 内に out-box が自動的に読み込まれ、ブラウザはあたかもオリジナルに共通部分が書かれているように表示しているはずです。

body部分だけのイメージです。

<body>
  <div id="in-box">
    <ul id="out-box">
      <li>メニュー１</li>
      <li>メニュー２</li>
      <li>メニュー３</li>
    </ul>
  </div>
</body>

以上で完了です。

実際の様子

「HTMLの共通部分を別ファイルにして多数ページで共通化」の実験

問題点や注意など

CSSとJavaScript

CSSなどスタイリングシートは今までのものをそのまま使えます。divの階層構造やid名のみ見直してください。

上のデモでは下記CSSを書いてあり、読み込まれた部分にも利いていることがわかります。

#out-box li {color: blue;}
#out-box li span {color: red;}

ユーザーのブラウザのJavaScriptの設定が有効になっている必要があります。たいてい初期値は有効ですし、わざわざ無効にする方は少ないと思いますが。

ローカル環境

ブラウザによっては、ローカルつまりご自分のPCでは、共通部分が読み込まれず表示されません。サーバーにアップすると見られます。

現時点で表示するブラウザでもバージョンアップで突然できなくなる可能性があります。例えばFireFoxもそうでした。

loadメソッド

空div内は全て消されて入替えされます。上記の #in-box 内にタグが書かれてあっても追加にはなりません。

menu.html 全てが読み込まれ、#out-box 部分だけが抽出されます。ページ読み込み速度に影響しますので共通部分のHTMLは最小限にしましょう。

空divの削除

org.html に新たに空divを加えた場合は、その分divの階層（#in-box）が1段多くなっています。このままで問題ないのですが、CSSの関係その他で元に戻したい方は下記のようにします。

$('#in-box').load('menu.html #out-box', function(){
  $('#out-box').unwrap();
});

jQueryの親要素を削除する機能で、ここでは #out-box の親＝#in-box が削除されます。

<body>
  <ul id="out-box">
    <li>メニュー１</li>
    <li>メニュー２</li>
    <li>メニュー３</li>
  </ul>
</body>

動的要素変更

ここは中上級者さん向けですので読み飛ばしてもけっこうです。

ブラウザでソースを見ても空divのままですが基本的には問題ありません。スクリプトを使用して要素を動的に変更している場合の注意です。

読み込まれた共通部分を操作する場合はコールバック関数にします。

//動作しません
$('#in-box').load('menu.html #out-box');
$('li').addClass('hoge');

//動作します
$('#in-box').load('menu.html #out-box', function(){
  $('li').addClass('hoge');
});

読み込まれた共通部分にイベントを当てる場合、動的要素に対応した書式、またはコールバック関数にします。

//動作しません
$('#in-box').load('menu.html #out-box');
$('li').click(function(){
  $(this).append($('！'));
});

//動作しません
$('#in-box').load('menu.html #out-box');
$('li').on('click',function(){
  $(this).append($('！'));
});

//動作します（動的要素に対応した書式）
$('#in-box').load('menu.html #out-box');
$('#in-box').on('click','li', function(){
  $(this).append($('！'));
});

//動作します（コールバック関数）
$('#in-box').load('menu.html #out-box', function(){
  $('li').click(function(){
    $(this).append($('！'));
  });
});

ここはお使いのサーバーやブラウザによって動作が異なる場合がありますので、各自お試し願います。

以上、いかがでしたでしょうか。私の別サイトで数百行のメニューを利用しています。サーバーの庶民的なコースですが速度はまずます、メンテナンス性は絶大な効果です。