ヘッダーやフッターなどの共通部分を1つのファイルで管理することで、変更などがあった時の修正が容易になります。
今回は静的なHTMLファイルの共通部分をjQueryでパーツ化して使う方法を紹介します。
まずは普通にHTMLを作成します。
index.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>タイトル</title>
</head>
<body>
<header id=”header”>
ヘッダーの内容を記述
</header>
<main>
メインコンテンツを記述
</main>
<footer id=”footer”>
フッターの内容を記述
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>タイトル</title>
</head>
<body>
<header id=”header”>
ヘッダーの内容を記述
</header>
<main>
メインコンテンツを記述
</main>
<footer id=”footer”>
フッターの内容を記述
</footer>
</body>
</html>
次に、共通部分の内容を別のHTMLファイルに分けます。
header.html
ヘッダーの内容を記述
ヘッダーの内容を記述
footer.html
フッターの内容を記述
フッターの内容を記述
今回はヘッダーとフッターをそれぞれheader.htmlとfooter.htmlに分けたので、index.htmlにこの共通部分を読み込むscriptを記述します。
index.html
<script src=”https://code.jquery.com/jquery-3.5.1.js”></script>
<script>
$(function(){
$(“#footer”).load(“footer.html”);
)};
</script>
<script src=”https://code.jquery.com/jquery-3.5.1.js”></script>
<script>
$(function(){
$(“#footer”).load(“footer.html”);
)};
</script>
scriptはhead内に書いてもいいです。
そして、最終的なHTMLは次のようになります。
index.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>タイトル</title>
</head>
<body>
<header id=”header”></header>
<main>
メインコンテンツを記述
</main>
<footer id=”footer”></footer>
<script src=”https://code.jquery.com/jquery-3.5.1.js”></script>
<script>
$(function(){
$(“#footer”).load(“footer.html”);
)};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>タイトル</title>
</head>
<body>
<header id=”header”></header>
<main>
メインコンテンツを記述
</main>
<footer id=”footer”></footer>
<script src=”https://code.jquery.com/jquery-3.5.1.js”></script>
<script>
$(function(){
$(“#footer”).load(“footer.html”);
)};
</script>
</body>
</html>
header.html
ヘッダーの内容を記述
ヘッダーの内容を記述
footer.html
フッターの内容を記述
フッターの内容を記述
HTMLの共通部分をパーツ化して使うのは便利ですが、一つ問題があって、ローカル環境では確認ができません。
Leave a Comment