質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

AUO
AUO

総合スコア25

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

2リアクション

0クリップ

487閲覧

投稿2022/11/25 01:00

前提

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

実現したいこと

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

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

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

該当のソースコード

html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Umenomiyayu website</title> <meta name="description" content="汗を流しつつ、思わず長居したくなるような居心地の良い空間を提供する銭湯「梅の宮湯」のウェブサイトです"> <meta name="viewport" content="width=device-width"> <script src="./js/toggle-menu.js"></script> <link href="https://github.com/girgald/umenomiyayu.git/./css/common.css" rel="stylesheet"> <link href="https://github.com/girgald/umenomiyayu.git/./css/index.css" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet"> </head> <body> <!-- headerはここから --> <header class="header"> <div class="header-inner"> <a class="header-logo" href="./index.html"> <img src="./images/common/headerlogotest.png" alt="KISSA"> </a> <button class="toggle-menu-button"> </button> <div class="header-site-menu"> <nav class="site-menu"> <ul> <li> <a href="./concept.html">CONCEPT</a> </li> <li> <a href="./charge.html">CHARGE</a> </li> <li> <a href="./shop.html">FACILITIES</a> </li> <li> <a href="./access.html">ACCESS</a> </li> </ul> </nav> </div> </div> </header> <!-- headerはここまで --> <!-- mainはここから --> <main class="main"> <div class="first-view"> <div class="first-view-text"> <h1>京都の歴史を感じながら<br>古き良きレトロな雰囲気を醸し出す銭湯</h1> <p>歴史を感じる雰囲気は日頃の疲れを洗い落します。</p> </div> </div> <div class="whatsnew"> <h2> WHAT'S NEWS&nbsp;-新着情報- </h2> <iframe src="./whatsnew/whatsnew.html"> インラインフレーム対応ブラウザでご覧いただけます。 </iframe> </div> <div class="lead"> <p>当浴場の近くには、名所がいくつか存在する。<br>松尾大社に、嵐山、東映太秦映画村・・・<br>参拝前に身を清めたい時や、観光での汗や疲れを落としたい時<br>そんなひと時に当浴場での入浴はいかがでしょうか。</p> <div class="link-button-area"> <a class="link-button" href="./concept.html">CONCEPT</a> </div> </div> <div class="recommended"> <h2>AREA INFORMATION</h2><p>-周辺情報-</p> <ul class="item-list"> <li> <img src="./images/index/togetsukyou49.jpg" alt="嵐山の画像"> <dl> <dt>嵐山</dt> <dd>観光名所の一つである嵐山は、紅葉がすごくきれいです。嵐山から車で約10分で梅の宮湯へお越しいただけます。</dd> </dl> </li> <li> <img src="./images/index/matsunootaisha6.jpg" alt="松尾大社の画像"> <dl> <dt>松尾大社</dt> <dd>飛鳥時代に建てられ、京都最古の神社の一つとして知られています。酒造神が奉られていることで有名です。徒歩で約8分くらいで梅の宮湯へお越しいただけます。</dd> </dl> </li> <li> <img src="./images/index/eigamura.jpeg" alt="東映太秦映画村の画像"> <dl> <dt>東映太秦映画村</dt> <dd>日本映画や江戸時代を再現したテーマパーク。村内に一歩足を踏み入れると、まるで江戸時代にタイムスリップしたかのような町並みが広がっています。車で約8分です。</dd> </dl> </li> <li> <img src="./images/index/umenomiyajinja.jpg" alt="梅の宮大社の画像"> <dl> <dt>梅の宮大社</dt> <dd>750年ごろに建てられ、酒造安全や子孫繁栄にご利益があると言われています。日本酒造の原点ともされているようです。毎年8月の最終日曜日に嵯峨天皇祭が行われています。今年を含めた3年は中止されています。また、最近では猫がいる神社としても有名です。梅宮大社から徒歩で約7分ほどで梅の宮湯へお越しいただけます。</dd> </dl> </li> <li> <img src="./images/index/arisugawa.jpeg" alt="有栖川の画像"> <dl> <dt>有栖川</dt> <dd>京都市右京区を流れる桂川中流へとつながる支流で、整備された散歩コースもきれいですし、春にはサクラも満開です。</dd> </dl> </li> </ul> <div class="link-button-area"> <a class="link-button" href="./charge.html">CHARGE</a> </div> </div> </main> <!-- mainはここまで --> <!-- footerはここから --> <footer class="footer"> <nav class="site-menu"> <ul> <li> <a href="./concept.html">CONCEPT</a> </li> <li><a href="./charge.html">CHARGE</a></li> <li><a href="./shop.html">FACILITIES</a></li> <li><a href="./access.html">ACCESS</a></li> </ul> </nav> <a class="footer-logo" href="./index.html"> <img src="./images/common/logotest6.png" alt="UMENOMIYAYU"> </a> <p class="footer-tel">TEL 075-873-0851</p> <p class="footer-time">開店時間(Open-Close) 14:00-23:00 &nbsp;&nbsp; 定休日: 元日のみ</p> </footer> <!-- footerはここまで --> </body> </html>

css

@charset "utf-8"; .header { background-color: hsla(310, 56%, 88%, 0.764); color: rgb(240, 90, 230); } .first-view { height: calc(100vh - 110px); background-image: url(../images/index/crop091RED20404.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; align-items: center; } .first-view-text { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-bottom: 80px; color: #ffffff; font-weight: bold; text-shadow: 1px 1px 10px #4b2c14; } .first-view-text h1 { font-family: 'Montserrat', sans-serif; font-size: 35px; line-height: 72px; } .first-view-text p { font-size: 36px; margin-top: 20px; } .whatsnew { width: 930px; max-width: 90%; margin-top: 35px; margin-left: auto; margin-right: auto; } .whatsnew h2 { font-size: 30px; } .whatsnew iframe { display: block; width: 100%; height: 320px; margin-top: 25px; background-color: white; border: 0; } .lead { max-width: 1200px; margin: 60px auto; } .lead p { line-height: 2; text-align: center; } .link-button-area { text-align: center; margin-top: 40px; } .link-button { background-color: hsla(310, 56%, 85%, 0.764); display: inline-block; min-width: 180px; line-height: 48px; border-radius: 24px; font-family: 'Montserrat' , sans-serif; font-size: 14px; color: rgb(240, 90, 230); } .link-button:hover { background-color: rgb(240, 90, 230); color: hsla(310, 56%, 88%, 0.764); } .recommended { background-color: hsla(312, 45%, 91%, 0.941); padding-top: 45px; padding-bottom: 55px; } .recommended h2 { font-size: 22px; font-weight: bold; text-align: center; } .recommended p { font-size: 18px; font-weight: bold; text-align: center; padding-top: 15px; } .recommended p::after { content: ''; display: block; width: 36px; height: 3px; background-color: #000000; margin-top: 20px; margin-left: auto; margin-right: auto; } .item-list { display: flex; padding-top: 40px; padding-bottom: 10px; padding-left: 60px; padding-right: 60px; overflow: scroll; } .item-list li { flex-shrink: 0; width: 260px; margin-left: 75px; } .item-list li:first-child { margin-left: 0; } .item-list dl { margin-top: 20px; } .item-list dt { font-weight: bold; } .item-list dd { font-size: 13px; line-height: 20px; margin-top: 10px; } .item-list .price { font-weight: bold; margin-top: 15px; } .footer { background-color: hsla(310, 56%, 88%, 0.764); color: rgb(240, 90, 230); } @media (max-width: 800px) { .first-view { height: calc(100vh - 50px); background-image: url(../images/index/bg-main-sp.jpg); align-items: flex-start; } .first-view-text { padding-top: 60px; padding-left: 20px; } .first-view-text h1 { font-size: 36px; line-height: 48px; } .first-view-text p { font-size: 14px; margin-top: 15px; } .lead { padding-left: 20px; padding-right: 20px; } .lead p { text-align: left; } .item-list { padding-left: 20px; padding-right: 20px; } .item-list li { width: 220px; margin-left: 30px; } }

試したこと

cssの属性パスを変えてみたのですが、やはり反映されませんでした。
イメージ説明

uky, Cocode👏を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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については原因はわかりませんがなぜか今は反映できています。 みなさん不明瞭な点があった中、回答いただきまして本当にありがとうございました。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。