【HTML】共通ファイルを使用する
のんびり燐華
2026.5.28【更新】
使用しているコード内にて、非推奨のものがありましたので一部コードを修正しました。
AjaxでHeader・Footerを共通化する方法
jQueryでHeader・Footerを共通化する方法
HTML
共通ファイルを埋め込みたい場所にIDを設置し、bodyタグ終了付近で、jQuery本体とjQueryカスタムコードファイルを読み込む。
<body>
<header id="site-header" class="site-header"></header>
.
<footer id="site-footer" class="site-footer"></footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/js/common-include.js"></script>
</body>jQuery
例：common-include.js
// ページが読み込まれたら、指定した要素に外部HTMLを注入する
$(function() {
$('#site-header').load('/include/header.html');
$('#site-footer').load('/include/footer.html');
});