GitHub Pagesでの公開方法に関して

前提・実現したいこと

初心者です。初投稿です。
HTMLで作成したウェブページをGitHubで公開したいと思っています。
VisualStudio2019で作成しました。
ウェブページはProfile、Skillの文字にカーソルを当てるとアンダーラインのアニメーションが表示され、クリックするとモーダルウィンドウが表示されるものです。
※Otherの文字もありますが、こちらの処理はまだ書いてませんので、反応なしで正解です。

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

HTMLのコード内にCSSとJavaScriptが入っています。
CSSでの処理(アンダーラインのアニメーション)は動いているようですが、JavaScriptの処理のみ反映されていません。(モーダルウィンドウが出ません。)

整ってないコードではありますがURLを下記に示します。
https://github.com/yusuke-morioka/myportforio1.git

HTML　CSS　JavaScript


### 試したこと
もともとHTML　CSS　JavaScriptの３つを別ファイルで作成してました。
その３つを公開したのですが、CSS、JavaScript両方反映されず、HTMLのみ反映されぐちゃぐちゃなページが公開されました。
色々調べたのですが埒が明かず、別ファイルなのが原因なのかと思い、全部まとめて一つのHTMLファイルとして公開しました。
結果、アンダーラインは無事反映されましたが今度はモーダルが反映されませんでした。

PC内に保存してあるHTMLファイルをクリックし、Chromeで表示させると問題なく動きます。
そのソースコードをそのままコピペしGitHubで公開してるのですが…なぜGitを通すとダメなのでしょうか。かれこれ３日ほど進歩がないのでどなたか助けていただきたく、お願い申し上げます。

kai0310

2020/06/03 12:24

再現できません。 https://codepen.io/k011510/pen/vYLYpaX?editors=1010

hoshi-takanori

2020/06/03 12:34

jQuery を http で読み込んでますが、https にすべきでは。

morimori3

2020/06/05 14:53

相対パスの部分を絶対パスに直し、JSファイルの読み込み方も変えた所、解決しました。http、httpsの表記の違いも今後気にしなければと思いました。ご協力いただきありがとうございました。

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

回答1件

ベストアンサー

GitHub上で、いくつか前のcommitのindex.htmlを拝見しました。

html
1<head>
2     <meta charset="utf-8" />
3     <title>yusuke morioka my site</title>
4     <link rel="stylesheet" href="StyleSheet1.css" />
5     <script src="jquery-3.4.1.min.js"></script>
6     <script src="Script1.js"></script>
7 </head>

上記のように相対パスでスタイルシートやスクリプトを読み込んでいますが、GitHub Pagesでは絶対パスでファイルを指定する必要があります。

html
1<link rel="stylesheet" href="https://www.〇〇.github.io/〇〇/StyleSheet1.css" />

などのように指定すると読み込むと思います！〇〇については、アカウント名やリポジトリ名が入ると思います。jsについてもcssと同様です。
cssやjsファイルはhtmlファイルと分けた方が良いと思うので、まずは絶対パスを試してはいかがでしょうか。

投稿2020/06/03 13:20

ToyoshimaHi

総合スコア130

morimori3

2020/06/04 14:09

親切な回答有難うございます。全く目を付けてませんでした。以前に諦めた別々のファイルで再度アップロードし、絶対パスを入力した所CSSがちゃんと反応し、見栄えは解消され安心しました。ですがJavascriptファイルが相変わらず反映されないままです。「jqueryの本体(3.4.1)」と、「処理のコード(Script1)」をアップロードしてどちらも絶対パスで読み込んでいるつもりなのですが…jqueryの場合は記述が異なる、とかそういった事もあるのでしょうか？度々申し訳ありません。 https://github.com/yusuke-morioka/myportforio1.git

markey

2020/06/04 15:49

Script1.jsはjQueryに依存してますが、index.htmlのほうでScript1.js => jQueryの順に読み込んでいるからではないかと思います。順番を逆(jQuery => Script1.jsの順)にしてみてください。また、jQueryはCDN経由で読み込めるので、わざわざダウンロードしてホスティングしなくても大丈夫だと思います。 https://developers.google.com/speed/libraries#jquery

morimori3

2020/06/05 14:48

URLのもので試してみた所、無事思っていた通りに読み込みました！JQueryはこんなに簡単に使えたのですね。勉強になりました。回答、コメントをくださった皆様お忙しい中本当に有難うございました。挫けそうになっていたので感謝、感謝です。もっと勉強します。また機会がありましたらよろしくお願いいたします！

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