githubでcssやJavaScriptを反映させたい

前提

作成したホームページをgithubでアップロードしたいのですが、ｃｓｓやJavaScriptが反映されないので、背景画像やハンバーガーメニュー、文字の色や配置が違ったりなかったりしています。嵐山などの画像はきちんと反映されています。

実現したいこと

ｃｓｓやJavaScriptを反映させて背景画像や文字の位置などを反映させたい。

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

ｃｓｓやJavaScriptが反映されていないため、ハンバーガーメニューや背景画像、文字の色や位置がばらばらになったりなかったりしている。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <title>Umenomiyayu website</title>
7    <meta name="description" content="汗を流しつつ、思わず長居したくなるような居心地の良い空間を提供する銭湯「梅の宮湯」のウェブサイトです">
8    <meta name="viewport" content="width=device-width">
9    <script src="./js/toggle-menu.js"></script>
10    <link href="https://github.com/girgald/umenomiyayu.git/./css/common.css" rel="stylesheet">
11    <link href="https://github.com/girgald/umenomiyayu.git/./css/index.css" rel="stylesheet">
12    <link rel="preconnect" href="https://fonts.googleapis.com">
13    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
15</head>
16
17<body>
18
19    <!-- headerはここから -->
20    <header class="header">
21        <div class="header-inner">
22            <a class="header-logo" href="./index.html">
23                <img src="./images/common/headerlogotest.png" alt="KISSA">
24            </a>
25            <button class="toggle-menu-button"> </button>
26            <div class="header-site-menu">
27                <nav class="site-menu">
28                    <ul>
29                        <li> <a href="./concept.html">CONCEPT</a> </li>
30                        <li> <a href="./charge.html">CHARGE</a> </li>
31                        <li> <a href="./shop.html">FACILITIES</a> </li>
32                        <li> <a href="./access.html">ACCESS</a> </li>
33                    </ul>
34                </nav>
35            </div>
36        </div>
37    </header>
38    <!-- headerはここまで -->
39
40    <!-- mainはここから -->
41    <main class="main">
42      <div class="first-view">
43        <div class="first-view-text">
44          <h1>京都の歴史を感じながら<br>古き良きレトロな雰囲気を醸し出す銭湯</h1>
45          <p>歴史を感じる雰囲気は日頃の疲れを洗い落します。</p>
46        </div>
47      </div>
48      <div class="whatsnew">
49        <h2>
50          WHAT'S NEWS&nbsp;-新着情報-
51        </h2>
52        <iframe src="./whatsnew/whatsnew.html">
53          インラインフレーム対応ブラウザでご覧いただけます。
54         </iframe>
55      </div>
56      <div class="lead">
57        <p>当浴場の近くには、名所がいくつか存在する。<br>松尾大社に、嵐山、東映太秦映画村・・・<br>参拝前に身を清めたい時や、観光での汗や疲れを落としたい時<br>そんなひと時に当浴場での入浴はいかがでしょうか。</p>
58        <div class="link-button-area">
59          <a class="link-button" href="./concept.html">CONCEPT</a>
60        </div>
61      </div>
62      <div class="recommended">
63        <h2>AREA INFORMATION</h2><p>-周辺情報-</p>
64        <ul class="item-list">
65          <li>
66            <img src="./images/index/togetsukyou49.jpg" alt="嵐山の画像">
67            <dl>
68              <dt>嵐山</dt>
69              <dd>観光名所の一つである嵐山は、紅葉がすごくきれいです。嵐山から車で約10分で梅の宮湯へお越しいただけます。</dd>
70            </dl>
71            
72          </li>
73          <li>
74            <img src="./images/index/matsunootaisha6.jpg" alt="松尾大社の画像">
75            <dl>
76              <dt>松尾大社</dt>
77              <dd>飛鳥時代に建てられ、京都最古の神社の一つとして知られています。酒造神が奉られていることで有名です。徒歩で約8分くらいで梅の宮湯へお越しいただけます。</dd>
78            </dl>
79            
80          </li>
81          <li>
82            <img src="./images/index/eigamura.jpeg" alt="東映太秦映画村の画像">
83            <dl>
84              <dt>東映太秦映画村</dt>
85              <dd>日本映画や江戸時代を再現したテーマパーク。村内に一歩足を踏み入れると、まるで江戸時代にタイムスリップしたかのような町並みが広がっています。車で約8分です。</dd>
86            </dl>
87            
88          </li>
89          <li>
90            <img src="./images/index/umenomiyajinja.jpg" alt="梅の宮大社の画像">
91            <dl>
92              <dt>梅の宮大社</dt>
93              <dd>750年ごろに建てられ、酒造安全や子孫繁栄にご利益があると言われています。日本酒造の原点ともされているようです。毎年8月の最終日曜日に嵯峨天皇祭が行われています。今年を含めた3年は中止されています。また、最近では猫がいる神社としても有名です。梅宮大社から徒歩で約7分ほどで梅の宮湯へお越しいただけます。</dd>
94            </dl>
95          </li>
96          <li>
97            <img src="./images/index/arisugawa.jpeg" alt="有栖川の画像">
98            <dl>
99              <dt>有栖川</dt>
100              <dd>京都市右京区を流れる桂川中流へとつながる支流で、整備された散歩コースもきれいですし、春にはサクラも満開です。</dd>
101            </dl>
102            
103          </li>
104        </ul>
105        <div class="link-button-area">
106          <a class="link-button" href="./charge.html">CHARGE</a>
107        </div>
108      </div>
109    </main>
110    <!-- mainはここまで -->
111
112    <!-- footerはここから -->
113    <footer class="footer">
114        <nav class="site-menu">
115            <ul>
116                <li> <a href="./concept.html">CONCEPT</a> </li>
117                <li><a href="./charge.html">CHARGE</a></li>
118                <li><a href="./shop.html">FACILITIES</a></li>
119                <li><a href="./access.html">ACCESS</a></li>
120            </ul>
121        </nav>
122        <a class="footer-logo" href="./index.html">
123            <img src="./images/common/logotest6.png" alt="UMENOMIYAYU">
124        </a>
125        <p class="footer-tel">TEL 075-873-0851</p>
126        <p class="footer-time">開店時間（Open-Close） 14:00-23:00 &nbsp;&nbsp; 定休日: 元日のみ</p>
127        
128
129    </footer>
130    <!-- footerはここまで -->
131
132</body>
133
134</html>

css
1@charset "utf-8";
2
3.header {
4  background-color: hsla(310, 56%, 88%, 0.764);
5  color: rgb(240, 90, 230);
6}
7
8
9
10.first-view {
11  height: calc(100vh - 110px);
12  background-image: url(../images/index/crop091RED20404.jpg);
13  background-repeat: no-repeat;
14  background-position: center center;
15  background-size: cover;
16  display: flex;
17  align-items: center;
18}
19
20.first-view-text {
21  width: 100%;
22  max-width: 1200px;
23  margin-left: auto;
24  margin-right: auto;
25  padding-left: 40px;
26  padding-bottom: 80px;
27  color: #ffffff;
28  font-weight: bold;
29  text-shadow: 1px 1px 10px #4b2c14;
30}
31
32.first-view-text h1 {
33  font-family: 'Montserrat', sans-serif;
34  font-size: 35px;
35  line-height: 72px;
36}
37
38.first-view-text p {
39  font-size: 36px;
40  margin-top: 20px;
41}
42
43.whatsnew {
44  width: 930px;
45  max-width: 90%;
46  margin-top: 35px;
47  margin-left: auto;
48  margin-right: auto;
49}
50
51.whatsnew h2 {
52  font-size: 30px;
53}
54
55.whatsnew iframe {
56  display: block;
57  width: 100%;
58  height: 320px;
59  margin-top: 25px;
60  background-color: white;
61  border: 0;
62}
63
64.lead {
65  max-width: 1200px;
66  margin: 60px auto;
67}
68
69.lead p {
70  line-height: 2;
71  text-align: center;
72}
73
74.link-button-area {
75  text-align: center;
76  margin-top: 40px;
77}
78
79.link-button {
80  background-color: hsla(310, 56%, 85%, 0.764);
81  display: inline-block;
82  min-width: 180px;
83  line-height: 48px;
84  border-radius: 24px;
85  font-family: 'Montserrat' , sans-serif;
86  font-size: 14px;
87  color: rgb(240, 90, 230);
88}
89
90.link-button:hover {
91  background-color: rgb(240, 90, 230);
92  color: hsla(310, 56%, 88%, 0.764);
93}
94
95.recommended {
96  background-color: hsla(312, 45%, 91%, 0.941);
97  padding-top: 45px;
98  padding-bottom: 55px;
99}
100
101.recommended h2 {
102  font-size: 22px;
103  font-weight: bold;
104  text-align: center;
105}
106
107.recommended p {
108  font-size: 18px;
109  font-weight: bold;
110  text-align: center;
111  padding-top: 15px;
112}
113
114.recommended p::after {
115  content: '';
116  display: block;
117  width: 36px;
118  height: 3px;
119  background-color: #000000;
120  margin-top: 20px;
121  margin-left: auto;
122  margin-right: auto;
123}
124
125.item-list {
126  display: flex;
127  padding-top: 40px;
128  padding-bottom: 10px;
129  padding-left: 60px;
130  padding-right: 60px;
131  overflow: scroll;
132}
133
134.item-list li {
135  flex-shrink: 0;
136  width: 260px;
137  margin-left: 75px;
138}
139
140.item-list li:first-child {
141  margin-left: 0;
142}
143
144.item-list dl {
145  margin-top: 20px;
146}
147
148.item-list dt {
149  font-weight: bold;
150}
151
152.item-list dd {
153  font-size: 13px;
154  line-height: 20px;
155  margin-top: 10px;
156}
157
158.item-list .price {
159  font-weight: bold;
160  margin-top: 15px;
161}
162
163.footer {
164  background-color: hsla(310, 56%, 88%, 0.764);
165  color: rgb(240, 90, 230);
166}
167@media (max-width: 800px) {
168  .first-view {
169    height: calc(100vh - 50px);
170    background-image: url(../images/index/bg-main-sp.jpg);
171    align-items: flex-start;
172  }
173
174  .first-view-text {
175    padding-top: 60px;
176    padding-left: 20px;
177  }
178
179  .first-view-text h1 {
180    font-size: 36px;
181    line-height: 48px;
182  }
183
184.first-view-text p {
185  font-size: 14px;
186  margin-top: 15px;
187}
188
189.lead {
190  padding-left: 20px;
191  padding-right: 20px;
192}
193
194.lead p {
195  text-align: left;
196}
197
198.item-list {
199  padding-left: 20px;
200  padding-right: 20px;
201}
202
203.item-list li {
204  width: 220px;
205  margin-left: 30px;
206}
207}

試したこと

ｃｓｓの属性パスを変えてみたのですが、やはり反映されませんでした。

yuma.inaura

2022/11/25 01:21

Githubでアップロードってなんでしょうか？

AUO

2022/11/25 01:33

コードのファイルをドラックもしくはコードを入力して公開することをアップロードと思っていましたが違いましたか？つまりは自作のホームページをgithubで公開したいということです。

Cocode

2022/11/25 01:37

JavaScriptファイルについては不具合の原因がわかりません。ファイル名は合っていますか？ CSSはパスがおかしいです。以下のように修正してみてください。 <link href="./CSS/common.css" rel="stylesheet"> <link href="./CSS/index.css" rel="stylesheet"> これでどうでしょう？

Cocode

2022/11/25 01:38

Github Pagesのことですよね？ Githubにファイルをアップロードしただけだと、ホームページとして公開されませんよー！ファイルをアップロード後、Github Pagesの設定画面で、Github Pagesとして公開しましたか？

AUO

2022/11/25 01:52

回答いただきましてありがとうございます。 JavaScriptのファイル名は「toggle-menu.js」となってまして、自分での確認ですが合っていました。指摘いただいた箇所も今修正しましたが、CSSと大文字で反映できました。ほんとうにありがとうございます。 JavaScriptのハンバーガーメニューについても今はなぜか反映されています。ありがとうございます。

AUO

2022/11/25 01:57

みなさん丁寧な回答いただきましてありがとうございます。まず私の説明不足と理解不足でGithub Pagesを明らかにしていなかった不備をお許しください。また、cssが反映されない点につきましては、ご指摘いただいたところhttpなどをいれなくていいことと大文字と小文字での違いがあったようです。 JavaScriptについては原因はわかりませんがなぜか今は反映できています。みなさん不明瞭な点があった中、回答いただきまして本当にありがとうございました。

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

回答2件

自己解決

正確には自己解決ではないのですが、解決済みにする方法がいまいちわからないので、この場を借りてみなさん丁寧な回答いただきましてありがとうございます。まず私の説明不足と理解不足でGithub Pagesを明らかにしていなかった不備をお許しください。
また、cssが反映されない点につきましては、ご指摘いただいたところhttpなどをいれなくていいことと大文字と小文字での違いがあったようです。
JavaScriptについては原因はわかりませんがなぜか今は反映できています。
みなさん不明瞭な点があった中、回答いただきまして本当にありがとうございました。

投稿2022/11/25 01:59

AUO

総合スコア25