自分で調べても答えが出なかったため、
大変恐縮ですが、皆様のお知恵をお貸しください。
実現したいこと
・ヘッダー&フッターを各ページ共通表示させたい。
前提
・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> © 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
以上
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー