はじめに
ヘッダー、フッターなどの共通部分のHTMLを別ファイルとして管理する方法はいくつかありますが今回はjQueryを用いて行う方法を紹介します。
特にサイトのページ数が多い時などは、共通部分のHTMLをパーツごとに分けて管理することで圧倒的に管理が楽になります。以下の例では、メインファイルとなるindex.htmlから共通部分であるヘッダー部分とフッター部分を切り分けて管理する方法を記載します。
とても簡単なのでぜひ実装してみてください。
手順1：indexファイルを作成する
index.html
<!DOCTYPE HTML><htmllang="ja"><head></head><body><divid="header">タイトルロゴや画像<br>グローバルメニューなど
</div><main>メインコンテンツは直接記述
</main><divid="footer">サイトのSNS情報や<br>コピーライトなど
</div></body></html>手順2：共通パーツを切り分ける
header.html
<headerid="header">タイトルロゴや画像<br>グローバルメニューなど
</header>footer.html
<footerid="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><htmllang="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が読み込まれる*/
<divid="header"></div><main>メインコンテンツは直接記述
</main>
/*ここにfooter.htmlが読み込まれる*/
<divid="footer"></div></body></html>問題点
jQueryで共通部分のHTMLを別ファイルとして管理する場合、一つだけ問題点があります。
実際にプログラムの反映を確認する際に、google chromeのローカル環境では、確認ができないという点です。（リモート環境では正常に確認ができます。）
なのでローカル環境で確認するときは、IEやEdgeなどを使うことをお勧めします。