自分で調べても答えが出なかったため、
大変恐縮ですが、皆様のお知恵をお貸しください。

実現したいこと

・ヘッダー&フッターを各ページ共通表示させたい。

前提

・JSファイル作成済み
・ヘッダー&フッターのHTMLファイルは作成済み
・cssファイルで装飾済み

発生している問題・エラーメッセージ

・TOPページは想定通りのレイアウトだが、
その他カテゴリ別のページに遷移した際にヘッダー・フッターのレイアウト(装飾)が崩れる。

該当のソースコード

HTML
1<!DOCTYPE html>
2<header>
3    <div class="container">
4         <img class="logo" src="./image/azfinix_company (1).png"alt="株式会社ABCDEFG">
5		</div> 
6			<!-- 以下のタグを<a>にして会社概要等のカテゴリ設定(リンク付けを行う) --> 
7			<div class="header-list">
8	    	 	<a href="./summary.html">会社概要</a>
9         		<a href="./performance.html">実績紹介</a>
10				<a href="./message.html">代表メッセージ</a>
11         		<a href="./privacy.html">プライバシーポリシー</a>
12	     		<a href="./toiawase.html">お問い合わせ</a>
13		    </div> 	
14</header>

HTML
1<!DOCTYPE html>
2<footer>
3	<div class="footer-wrapper">
4	 <small> &copy; 2023 Azfinix	Co., Ltd  </small>
5	</div>
6  </footer>

JS
1window.onload = function() {
2	function includeHTML(file, target) {
3		const xhr = new XMLHttpRequest();
4		xhr.onreadystatechange = function() {
5			if (xhr.readyState === 4 && xhr.status === 200) {
6				target.innerHTML = xhr.responseText;
7			}
8		};
9		xhr.open('GET', file, true);
10		xhr.send();
11	}
12	includeHTML('header.html', document.getElementById('header'));
13	includeHTML('footer.html', document.getElementById('footer'));
14}

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5	<meta name="viewport" content="width=device-width,initial-scale=1.0">
6    <title>株式会社ABCDEFG-代表メッセージ</title>
7	<link rel="stylesheet" href="./CSS/html5reset-1.6.1.css">
8    <link rel="stylesheet" href="./CSS/stylesheet_message.css">
9  </head>
10
11  <body>
12	<div id="header"><!-- この中にheader.htmlが展開される --></div>
13
14	<main>
15		<h1>代表からのメッセージ</h1>
16	    <div class="main-wrapper">
17		 <img src="./image/1571961_s.jpg" alt="人物像"><!--サンプル画像-->
18	      <div class="message">
19			<h2>ようこそ、ABCDEFGへ</h2>
20
21			<p>メッセージ</p>
22			<div class="sign">
23				<p> 株式会社ABCDEFG <br>
24					代表取締役   山田 太郎</p>
25			</div>
26
27		  </div>
28		</div>
29    </main>
30	<div id="footer"><!-- footer.htmlが展開される --></div>
31
32	<script src="./js/include.js"></script>
33
34  </body>
35</html>
36
37
38

試したこと

①ヘッダー&フッター毎に、CSSファイルを作成するも改善できず。
②TOP以外のカテゴリ別のCSSファイルに、TOP同様のCSSコードを「コピー&ペースト」で張り付けるも改善できず。

補足情報（FW/ツールのバージョンなど）

【開発環境】
・VSCODE
・Windows11

　
以上
よろしくお願いいたします。

m.ts10806

2023/05/08 06:50

htmlなど静的リソースのみの構築ですか？ PHP、Javaなどサーバサイドの言語も利用可ですか？ ※ただ静的リソースのみでも「テンプレート化」などで検索すると割と出てくる内容に思います

Mototaka

2023/05/08 07:22

今回のサイトは静的リソースのみでの構築となります。また作成中のサイトはサーバーサイド言語の利用を想定した、コーディングは行っていない状態となります。 ※私個人もサーバーサイド言語は未収得のため。ご教示いただきありがとうございます。一度「テンプレート化」について確認してみます。

行動規範の内容に同意します

回答1件

ベストアンサー

httpdサーバー上で行っている前提でよろしいですか？ローカルではajaxは機能しません。
めんどうであればiframeで処理する手もあります

参考

header.htmlやfooter.htmlをhtmlではなくjsにしてしまうという手もあります

javascript
1//header.js
2document.getElementById('header').innerHTML=`
3<header>
4    <div class="container">
5         <img class="logo" src="./image/azfinix_company (1).png"alt="株式会社ABCDEFG">
6		</div> 
7			<!-- 以下のタグを<a>にして会社概要等のカテゴリ設定(リンク付けを行う) --> 
8			<div class="header-list">
9	    	 	<a href="./summary.html">会社概要</a>
10         		<a href="./performance.html">実績紹介</a>
11				<a href="./message.html">代表メッセージ</a>
12         		<a href="./privacy.html">プライバシーポリシー</a>
13	     		<a href="./toiawase.html">お問い合わせ</a>
14		    </div> 	
15</header>
16`;

javascript
1//footer.js
2document.getElementById('footer').innerHTML=`
3<footer>
4	<div class="footer-wrapper">
5	 <small> &copy; 2023 Azfinix	Co., Ltd  </small>
6	</div>
7  </footer>
8`;

としておいて、こう呼び出す

javascript
1<script>
2window.addEventListener('DOMContentLoaded',()=>{
3  document.head.appendChild(Object.assign(document.createElement('script'),{src:"header.js"}));
4  document.head.appendChild(Object.assign(document.createElement('script'),{src:"footer.js"}));
5});    
6</script>
7<div id="header"></div>
8<div id="main">main</div>
9<div id="footer"></div>