はじめに
ヘッダー、フッターなどの共通部分のHTMLを別ファイルとして管理する方法はいくつかありますが今回はjQueryを用いて行う方法を紹介します。
特にサイトのページ数が多い時などは、共通部分のHTMLをパーツごとに分けて管理することで圧倒的に管理が楽になります。以下の例では、メインファイルとなるindex.htmlから共通部分であるヘッダー部分とフッター部分を切り分けて管理する方法を記載します。
とても簡単なのでぜひ実装してみてください。
手順1：indexファイルを作成する
index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
</head>
<body>
<div id="header">
タイトルロゴや画像<br>
グローバルメニューなど
</div>
<main>
メインコンテンツは直接記述
</main>
<div id="footer">
サイトのSNS情報や<br>
コピーライトなど
</div>
</body>
</html>
手順2：共通パーツを切り分ける
header.html
<header id="header">
タイトルロゴや画像<br>
グローバルメニューなど
</header>
footer.html
<footer id="footer">
サイトのSNS情報や<br>
コピーライトなど
</footer>
手順3：index.htmlに各パーツを読み込むscriptを記述
head内にjQueryを読み込む。また、loadメソッドで各パーツを読み込む。
※この順番を間違えてはならない
index.html
<head>
//jQuery読み込み
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
//共通パーツ読み込み
$(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
最終的なHTMLファイル
index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
//共通パーツ読み込み
$(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
/*ここにheader.htmlが読み込まれる*/
<div id="header"></div>
<main>
メインコンテンツは直接記述
</main>
/*ここにfooter.htmlが読み込まれる*/
<div id="footer"></div>
</body>
</html>
問題点
jQueryで共通部分のHTMLを別ファイルとして管理する場合、一つだけ問題点があります。
実際にプログラムの反映を確認する際に、google chromeのローカル環境では、確認ができないという点です。（リモート環境では正常に確認ができます。）
なのでローカル環境で確認するときは、IEやEdgeなどを使うことをお勧めします。