jQueryで追加したHTMLにCSSが反映されない

前提・実現したいこと

ウェブページのheader footerなどの共通部分をテンプレートとして別ファイルで作っています。
footerだけの時はCSSが反映されるのに、headerをページに反映させるとCSSが反映されなくなります。
共通部分を追加するコードはJavaScriptでjQueryを使っています。

該当のソースコード

index.html

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6  <link rel="stylesheet" href="./template/style.css" >
7  <title>home</title>
8  <noscript>
9    <META HTTP-EQUIV=Refresh CONTENT="0; URL=js_ng.html">
10  </noscript>
11  <script type="text/javascript" src="./template.js" ></script>
12</head>
13<body>
14  <script src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
15  <!-- header -->
16  <script type="text/javascript">header();</script>
17
18  <script type="text/javascript">footer();</script>
19</body>
20</html>
21

header.html

html
1<header>
2  <h1 class="headline">
3    <div class="logo">
4      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 769.38 180.85"><path fill="#00ff48" d="M43.94 93.929C14.77 85.209.13 71.019 0 51.349c0-10.94 3.97-19.69 11.91-26.27 7.94-6.57 18.95-9.86 33.01-9.86 12.63 0 24.54 2.22 35.74 6.64 1.69.65 3 1.86 3.9 3.61.92 1.76 1.05 3.56.4 5.38-.53 1.69-1.64 2.86-3.33 3.51-1.69.65-3.32.65-4.88 0-10.02-4.04-20.63-6.06-31.83-6.06-9.25 0-16.41 2.02-21.5 6.06-5.07 4.03-7.61 9.7-7.61 16.99 0 12.9 9.51 22.21 28.52 27.94 16.54 4.81 28.29 10.8 35.25 17.96 6.97 7.16 10.45 16.47 10.45 27.93 0 12.89-4.04 22.79-12.11 29.7-8.07 6.9-19.53 10.34-34.37 10.34-13.81 0-26.56-3.06-38.28-9.18-1.69-.91-2.86-2.34-3.52-4.29-.65-1.95-.58-3.84.21-5.67.64-1.56 1.78-2.66 3.4-3.31 1.63-.66 3.24-.46 4.8.58 10.02 5.73 21.15 8.59 33.39 8.59 9.89 0 17.44-2.27 22.65-6.83 5.21-4.56 7.82-11.2 7.82-19.93 0-7.94-2.22-14.25-6.64-18.94-4.43-4.69-12.25-8.79-23.44-12.31zm109.03 60.93L105.5 25.179c-.65-1.95-.42-3.77.69-5.46 1.1-1.69 2.77-2.54 4.98-2.54 2.47 0 4.78.78 6.93 2.34 2.15 1.56 3.62 3.52 4.4 5.86l42.38 121.87c0 .13.06.19.2.19.26 0 .39-.06.39-.19l42.38-122.26c.78-2.22 2.18-4.07 4.2-5.56 2.02-1.5 4.26-2.25 6.73-2.25 1.96 0 3.52.85 4.69 2.54 1.18 1.69 1.44 3.45.78 5.27l-47.45 129.87c-.92 2.48-2.49 4.5-4.7 6.07-2.22 1.56-4.62 2.34-7.22 2.34-2.61 0-5.02-.78-7.24-2.34-2.21-1.57-3.76-3.59-4.67-6.07zm157.69 10.36c-23.18 0-41.74-6.8-55.67-20.4-13.93-13.62-20.89-31.82-20.89-54.6 0-22.79 6.8-40.99 20.4-54.59 13.6-13.6 31.93-20.41 54.99-20.41 14.84 0 28.05 3 39.64 8.99 1.56.78 2.6 2.05 3.12 3.81.52 1.75.39 3.48-.39 5.17-.65 1.56-1.82 2.61-3.51 3.13-1.69.52-3.32.39-4.88-.39-10.16-5.09-21.09-7.63-32.81-7.63-18.75 0-33.5 5.6-44.25 16.8-10.74 11.2-16.11 26.24-16.11 45.12 0 19.01 5.57 34.12 16.7 45.32 11.13 11.19 26.14 16.79 45.02 16.79 11.85 0 22.27-1.95 31.25-5.86.91-.39 1.37-1.17 1.37-2.34v-51.17c0-1.18-.52-1.83-1.56-1.96H300.5c-1.82 0-3.35-.61-4.59-1.85-1.24-1.24-1.86-2.74-1.86-4.49 0-1.76.62-3.26 1.86-4.5 1.24-1.24 2.77-1.86 4.59-1.86h48.24c3.12 0 5.79 1.14 8 3.42 2.22 2.28 3.32 4.92 3.32 7.91v53.52c0 3.64-.98 6.87-2.93 9.67-1.95 2.8-4.49 4.79-7.61 5.95-11.59 4.3-24.54 6.45-38.86 6.45zM395 21.859c-1.82 0-3.35-.61-4.59-1.86-1.23-1.23-1.85-2.8-1.85-4.68 0-1.89.62-3.48 1.85-4.78 1.24-1.31 2.77-1.96 4.59-1.96h160.16c1.82 0 3.35.65 4.59 1.96 1.24 1.3 1.86 2.89 1.86 4.78 0 1.88-.62 3.45-1.86 4.68-1.24 1.25-2.77 1.86-4.59 1.86h-70.7c-1.17 0-1.76.59-1.76 1.75v17.78c0 1.05.59 1.63 1.76 1.76h28.32c3.13 0 5.79 1.1 8 3.32 2.22 2.21 3.33 4.88 3.33 8v72.27c0 3.12-1.14 5.76-3.42 7.92-2.28 2.15-4.92 3.22-7.91 3.22h-75.39c-3.12 0-5.79-1.1-8.01-3.31-2.21-2.22-3.32-4.83-3.32-7.83v-72.27c0-3.12 1.14-5.79 3.41-8 2.28-2.22 4.92-3.32 7.92-3.32h28.31c1.18 0 1.77-.59 1.77-1.76v-17.78c0-1.16-.59-1.75-1.77-1.75H395zm72.47 102.14v-27.34c0-1.04-.59-1.56-1.77-1.56h-23.82c-1.17 0-1.75.52-1.75 1.56v27.34c0 1.18.58 1.83 1.75 1.96h23.82c1.18-.13 1.77-.78 1.77-1.96zm0-42.18v-24.8c0-1.18-.59-1.77-1.77-1.77h-23.82c-1.17 0-1.75.59-1.75 1.77v24.8c0 1.04.58 1.56 1.75 1.56h23.82c1.18 0 1.77-.52 1.77-1.56zm15.23-24.8v24.8c0 1.04.59 1.56 1.76 1.56h23.82c1.18 0 1.77-.52 1.77-1.56v-24.8c0-1.18-.59-1.77-1.77-1.77h-23.82c-1.17 0-1.76.59-1.76 1.77zm0 39.64v27.34c0 1.18.59 1.83 1.76 1.96h23.82c1.18 0 1.77-.65 1.77-1.96v-27.34c0-1.04-.59-1.56-1.77-1.56h-23.82c-1.17 0-1.76.52-1.76 1.56zm71.58 79.8c-1.5 1.5-3.32 2.25-5.47 2.25-2.14 0-3.9-.75-5.28-2.25-1.36-1.5-2.04-3.3-2.04-5.38v-1.75c0-.92-.46-1.37-1.36-1.37H410.05c-.92 0-1.38.45-1.38 1.37v1.75c0 2.08-.68 3.88-2.04 5.38-1.37 1.5-3.13 2.25-5.28 2.25-2.15 0-3.97-.75-5.47-2.25-1.5-1.5-2.24-3.3-2.24-5.38V56.819c0-2.09.74-3.87 2.24-5.36 1.5-1.5 3.32-2.25 5.47-2.25s3.91.75 5.28 2.25c1.36 1.49 2.04 3.27 2.04 5.36v96.48c0 1.04.59 1.56 1.77 1.56h129.3c1.16 0 1.75-.52 1.75-1.56v-96.48c0-2.09.68-3.87 2.04-5.36 1.38-1.5 3.14-2.25 5.28-2.25 2.15 0 3.97.75 5.47 2.25 1.5 1.49 2.25 3.27 2.25 5.36v114.26c0 2.08-.75 3.88-2.25 5.38zm211.82-19.44c1.69 1.43 2.73 3.15 3.12 5.17.4 2.02.07 4.01-.97 5.97-1.04 1.69-2.57 2.72-4.59 3.11-2.03.39-3.81.01-5.38-1.16-12.5-10.03-23.73-22.72-33.68-38.09-9.97-15.36-17.42-31.45-22.36-48.25-.27-1.16-.98-1.75-2.16-1.75h-10.55c-.38 0-.71.13-.97.39-.13.26-.13.45 0 .58 8.2 8.21 14.61 17.78 19.24 28.72 4.62 10.94 6.94 22.2 6.94 33.78 0 12.64-1.34 21.23-4.02 25.78-2.67 4.56-7.52 6.84-14.55 6.84-5.99 0-14.06-.19-24.21-.57-1.83-.14-3.39-.86-4.69-2.16-1.31-1.31-2.02-2.87-2.14-4.69-.14-1.69.38-3.18 1.54-4.48 1.18-1.31 2.68-1.89 4.5-1.77 7.69.4 13.88.6 18.57.6 4.16 0 6.86-1.18 8.09-3.52 1.24-2.35 1.86-7.89 1.86-16.61 0-2.48-.06-4.37-.19-5.67 0-.38-.17-.68-.5-.88-.32-.19-.62-.16-.87.1-17.71 14.06-40.95 25.85-69.72 35.36-1.83.65-3.65.55-5.47-.3-1.82-.84-3.06-2.18-3.72-4-.65-1.69-.62-3.35.09-4.98.72-1.63 2.06-2.77 4.02-3.43 30.73-9.63 54.82-21.48 72.27-35.54.9-.65 1.29-1.56 1.17-2.74-.78-2.6-2.22-6.11-4.3-10.54-.52-1.17-1.3-1.36-2.34-.58-15.63 11.32-35.81 21.09-60.55 29.29-1.82.65-3.59.55-5.28-.29-1.69-.85-2.92-2.12-3.7-3.82-.53-1.68-.36-3.31.48-4.87s2.11-2.6 3.81-3.13c24.35-7.42 44.07-16.34 59.17-26.76 1.04-.78 1.24-1.63.6-2.53-2.35-3.13-4.76-5.86-7.24-8.21-.78-.91-1.69-1.04-2.73-.39-11.59 6.52-26.17 12.7-43.75 18.55-1.69.52-3.35.39-4.98-.39-1.63-.78-2.77-2.01-3.41-3.7-.52-1.57-.43-3.1.28-4.6.72-1.5 1.86-2.5 3.42-3.03 15.1-4.29 28.45-9.3 40.05-15.03.26-.13.39-.3.39-.48 0-.2-.13-.3-.39-.3h-22.66c-3.12 0-5.76-1.1-7.92-3.31-2.15-2.22-3.22-4.83-3.22-7.83v-12.5c0-.52-.26-.65-.78-.39-1.43 1.18-3.05 1.73-4.87 1.67-1.83-.07-3.39-.89-4.69-2.45l-.39-.19c-1.31-1.44-1.89-3.1-1.77-4.98.13-1.89.99-3.42 2.55-4.6 14.84-12.24 26.49-26.17 34.95-41.79 2.35-4.43 5.93-6.26 10.75-5.47 1.95.39 3.41 1.4 4.39 3.03.98 1.62 1.01 3.29.1 4.98 0 .13-.14.42-.39.88-.27.46-.39.75-.39.87-.27.78-.07 1.17.59 1.17h50.58c1.69 0 3.19.62 4.5 1.86 1.3 1.25 1.95 2.78 1.95 4.6 0 4.16-1.3 8-3.91 11.51-2.21 3.13-3.46 4.76-3.71 4.89-.65.91-.45 1.43.59 1.57h27.92c3.13 0 5.76 1.11 7.91 3.32 2.15 2.21 3.23 4.88 3.23 8v24.02c0 3.12-1.08 5.77-3.23 7.92-2.15 2.15-4.78 3.22-7.91 3.22h-32.81c-1.04 0-1.44.52-1.17 1.56 3.38 10.28 7.29 19.59 11.71 27.92.4.92 1.18.99 2.35.21 6.91-5.35 13.94-11.92 21.09-19.74 1.18-1.42 2.71-2.2 4.6-2.32 1.88-.14 3.54.38 4.98 1.54 1.43 1.04 2.24 2.48 2.44 4.3.19 1.82-.36 3.39-1.66 4.69-7.81 8.85-15.88 16.54-24.22 23.04-.91.66-1.11 1.44-.59 2.35 8.59 12.11 18.23 22.6 28.91 31.45zm-76.96-88.28v-18.95c0-1.17-.65-1.75-1.95-1.75h-38.47c-1.04 0-1.56.58-1.56 1.75v18.95c0 1.04.52 1.56 1.56 1.56h38.47c1.3 0 1.95-.52 1.95-1.56zm11.14-33.2c1.04 0 1.96-.39 2.74-1.18 1.82-2.08 4.36-5.14 7.61-9.18.65-1.04.46-1.57-.58-1.57h-44.74c-1.04 0-1.88.46-2.53 1.38-1.3 1.95-3.58 4.94-6.84 8.98-.65.91-.45 1.43.59 1.57h43.75zm3.32 33.2c0 1.04.64 1.56 1.95 1.56H745c1.04 0 1.63-.52 1.77-1.56v-18.95c0-1.17-.59-1.75-1.77-1.75h-39.45c-1.17 0-1.82.58-1.95 1.75v18.95zm-94.05 109.86c-1.37 1.5-3.06 2.25-5.08 2.25-2.01 0-3.73-.72-5.17-2.16-1.43-1.43-2.14-3.18-2.14-5.26v-83.99c0-.26-.1-.39-.3-.39-.2 0-.36.06-.48.19-2.61 4.95-5.41 9.64-8.41 14.06-1.04 1.56-2.48 2.18-4.3 1.86-1.82-.32-3.05-1.39-3.7-3.22-1.82-5.6-1.11-11.07 2.14-16.4 13.02-20.84 22.99-46.43 29.89-76.77.52-2.08 1.66-3.68 3.41-4.78 1.76-1.1 3.75-1.46 5.97-1.08 1.94.4 3.47 1.41 4.58 3.03 1.11 1.63 1.47 3.48 1.07 5.56-3.51 16.41-8.39 31.97-14.64 46.69-.52 1.31-.78 2.48-.78 3.52v111.72c0 1.95-.69 3.68-2.06 5.17z"/> 
5      </svg>
6    </div>
7  </h1>
8  <ul class="nav-list">
9    <li class="nav-list-item">
10      <a style="color: white;" href="https://***">Home</a>
11    </li>
12    <li class="nav-list-item">About</li>
13    <li class="nav-list-item">Topic</li>
14  </ul>
15</header>
16

footer.html

html
1<footer>
2  <p>&copy; 2020 ***</p>
3</footer>
4

style.css

SCC
1* {
2  margin:0; padding:0;
3}
4body {
5  font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
6  background-color: white;
7}
8header {
9  height: 100px;
10  width: 100%;
11  padding: 15px 0;
12  background-color: black; /* #FCFBF7 */
13  color: white;
14}
15header .headline{
16  line-height: 100px;
17  float: left;
18  font-size: 30px;
19  margin-left: 100px;
20  height: 100px;
21}
22header .headline .logo{
23  height: 70px;
24  width: 429px;
25  padding: 15px 0;
26}
27.nav-list {
28  line-height: 100px;
29  float: right;
30  margin-right: 100px;
31  list-style: none;
32}
33.nav-list-item {
34  list-style: none;
35  display: inline-block;
36  color: white;
37  margin: 0 20px;
38}
39
40footer{
41    width: 100%;
42    background-color: black;
43    color: white;
44    text-align: center;
45    padding: 20px 0;
46
47    position: absolute;/*←絶対位置*/
48    bottom: 0; /*下に固定*/
49}
50

template.js

JavaScript
1function header(){
2  $.ajax({
3    url: "./template/header.html",
4    cache: false,
5    success: function(html){
6      document.write(html);
7    }
8  });
9}
10function footer(){
11  $.ajax({
12    url: "./template/footer.html",
13    cache: false,
14    success: function(html){
15      document.write(html);
16    }
17  });
18}

###追記
今回はすぐ解決できたという点でベストアンサーを選ばせていただきました。
総合的に考えた結果、document.write()を使わずに書き直すことにしました。
ご回答してくれた方々ありがとうございました。

m.ts10806

2020/04/25 07:15

本当に何一つ反映されてませんか？ HTMLやCSSをもっと単純で分かりやすい記述にしてもダメですか？

denshatrain

2020/04/25 08:15

全くです。何一つ反映されていません。

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

回答2件

jQueryが使える環境なのであればdocument.writeを使用せずjQueryで文章の追加/書き換えを行ったほうが良いです。（body要素にappend/prependすれば良いと思います）

【document.write()を使わない方法 - Qiita】
https://qiita.com/michiko89/items/2db6faf4b8d121bf34a2

【jQueryを利用したDOM操作要素の追加メソッドまとめ - Qiita】
https://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9

投稿2020/04/25 08:26

kei344

総合スコア69606

denshatrain

2020/04/25 10:56

document.write()を使わない方法で書き直してみます。ありがとうございました。

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

ベストアンサー

これでできませんか？

function header(){
  $.ajax({
    url: "./template/header.html",
    cache: false,
    async: false,
    dataType: 'html',
    success: function(html){
      document.write(html);
    }
  });
}
function footer(){
  $.ajax({
    url: "./template/footer.html",
    cache: false,
    async: false,
    dataType: 'html',
    success: function(html){
      document.write(html);
    }
  });
}

投稿2020/04/25 07:52

退会済みユーザー

総合スコア0

denshatrain

2020/04/25 08:19

反映されました。ありがとうございます。しかし、なぜCSSが反映されなかったのでしょうか。

退会済みユーザー

2020/04/25 09:50

読み込みのタイミングを考えないとページがリセットされます。「document.write は文書ストリームに書き込みを行うため、閉じられた (読み込み済みの) 文書で document.write を呼び出すと、自動的に document.open が呼び出され、文書はクリアされます。」 https://developer.mozilla.org/ja/docs/Web/API/Document/write 使用する場面にもよりますが、 document.writeは結構古く、トラブルの原因になることもあるので、別方法での対応を推奨している事が多いです。

denshatrain

2020/04/25 10:54

わかりました。kei344さんも言っているように他の方法も試してみます。ありがとうございました。

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

あなたの回答