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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1300閲覧

ホームページのjqueryが突然動かなくなりました。

iceforest

総合スコア15

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2023/03/13 05:52

実現したいこと

jqueryが正常に動くようにしたい。
今作っているハンバーガーメニューの制作の続きをして検証をしながら完成させたい。
最初の段階で、「is-hidden」で、jqueryを使って隠れていた画像や文章が見えている状態を直したい。
jqueryのコードが多くなってから突然全部のjqueryが動かなくなりました。

発生している問題・エラーメッセージ(検証のconsoleで出ているエラー)

GET http://127.0.0.1:5500/10/10/main.js net::ERR_ABORTED 404 (Not Found)

Refused to execute script from 'http://127.0.0.1:5500/10/10/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

試したこと

ググってjqueryが動かなくなる原因を調べて実行しました。
jqueryの記述と場所を変えて、正常に動くかやってみました。

ご回答よろしくお願いします。

該当のソースコード

リンク内容

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <link rel="stylesheet" href="reset.css" /> 8 <link rel="stylesheet" href="stylesheet.css" /> 9 <link rel="stylesheet" href="responsive.css" /> 10 11 <title>Document</title> 12 </head> 13 <body> 14 <header class="header" id="header"> 15 <div class="header-div"> 16 <a class="header-a" href="index.html"> 17 <img class="header-img" src="img\logo.svg" alt="" /> 18 </a> 19 </div> 20 <nav id="nav"> 21 <ul class="nav-ul"> 22 <li class="nav-li"><a href=""> PRODUCTS</a></li> 23 <li class="nav-li"><a href=""> ABOUT</a></li> 24 <li class="nav-li"><a href=""> COMPANY</a></li> 25 <li class="nav-li"><a href=""> CONTACT</a></li> 26 </ul> 27 </nav> 28 <div class="toggle_btn"> 29 <span></span> 30 <span></span> 31 <span></span> 32 </div> 33 </header> 34 <main class="a"> 35 36 <div class="a-container"> 37 <h2>products</h2> 38 <ul class="a-ul"> 39 <li class="a-li"> 40 <a class="a-a" href=""> 41 <img class="a-img" src="img\item1.jpg" alt="" /> 42 <p> 43 プロダクトタイトルプロダクトタイトル <br /> 44 ¥99,999 +tax 45 </p> 46 </a> 47 </li> 48 <li class="a-li"> 49 <a class="a-a" href=""> 50 <img class="a-img" src="img\item2.jpg" alt="" /> 51 <p> 52 プロダクトタイトルプロダクトタイトル <br /> 53 ¥99,999 +tax 54 </p> 55 </a> 56 </li> 57 <li class="a-li"> 58 <a class="a-a" href=""> 59 <img class="a-img" src="img\item3.jpg" alt="" /> 60 <p> 61 プロダクトタイトルプロダクトタイトル <br /> 62 ¥99,999 +tax 63 </p> 64 </a> 65 </li> 66 <li class="a-li"> 67 <a class="a-a" href=""> 68 <img class="a-img" src="img\item4.jpg" alt="" /> 69 <p> 70 プロダクトタイトルプロダクトタイトル <br /> 71 ¥99,999 +tax 72 </p> 73 </a> 74 </li> 75 <li class="a-li"> 76 <a class="a-a" href=""> 77 <img class="a-img" src="img\item5.jpg" alt="" /> 78 <p> 79 プロダクトタイトルプロダクトタイトル <br /> 80 ¥99,999 +tax 81 </p> 82 </a> 83 </li> 84 <li class="a-li"> 85 <a class="a-a" href=""> 86 <img class="a-img" src="img\item6.jpg" alt="" /> 87 <p> 88 プロダクトタイトルプロダクトタイトル <br /> 89 ¥99,999 +tax 90 </p> 91 </a> 92 </li> 93 <li class="a-li"> 94 <a class="a-a" href=""> 95 <img class="a-img" src="img\item7.jpg" alt="" /> 96 <p> 97 プロダクトタイトルプロダクトタイトル <br /> 98 ¥99,999 +tax 99 </p> 100 </a> 101 </li> 102 <li class="a-li"> 103 <a class="a-a" href=""> 104 <img class="a-img" src="img\item8.jpg" alt="" /> 105 <p> 106 プロダクトタイトルプロダクトタイトル <br /> 107 ¥99,999 +tax 108 </p> 109 </a> 110 </li> 111 <li class="a-li is-hidden"> 112 <a class="a-a" href=""> 113 <img class="a-img" src="img\item9.jpg" alt="" /> 114 <p> 115 プロダクトタイトルプロダクトタイトル <br /> 116 ¥99,999 +tax 117 </p> 118 </a> 119 </li> 120 <li class="a-li is-hidden"> 121 <a class="a-a" href=""> 122 <img class="a-img" src="img\item10.jpg" alt="" /> 123 <p> 124 プロダクトタイトルプロダクトタイトル <br /> 125 ¥99,999 +tax 126 </p> 127 </a> 128 </li> 129 <li class="a-li is-hidden"> 130 <a class="a-a" href=""> 131 <img class="a-img" src="img\item11.jpg" alt="" /> 132 <p> 133 プロダクトタイトルプロダクトタイトル <br /> 134 ¥99,999 +tax 135 </p> 136 </a> 137 </li> 138 <li class="a-li is-hidden"> 139 <a class="a-a" href=""> 140 <img class="a-img" src="img\item12.jpg" alt="" /> 141 <p> 142 プロダクトタイトルプロダクトタイトル <br /> 143 ¥99,999 +tax 144 </p> 145 </a> 146 </li> 147 </ul> 148 <p class="more-btn">View More</p> 149 <div class="more-12"><a href="">1</a><a href="">2</a></div> 150 </div> 151 </main> 152 <footer> 153 <div class="footer-div"> 154 <ul class="footer-ul"> 155 <li class="footer-li"><a href="https://www.instagram.com/">instagram</a></li> 156 <li class="footer-li"><a href="https://twitter.com/?lang=ja">twitter</a></li> 157 <li class="footer-li"><a href="https://www.facebook.com/facebook/?locale=ja_JP">facebook</a></li> 158 </ul> 159 160 </div> 161 <div class="c">© Furniture Design</div> 162 </footer> 163 <script 164 src="https://code.jquery.com/jquery-3.6.3.min.js" 165 integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" 166 crossorigin="anonymous" 167 ></script> 168 <script src="main.js"></script> 169 </body> 170</html> 171

scss

1header { 2 max-width: 1360px; 3 height: 80px; 4 width: 100%; 5 6 margin: 0 auto; 7 display: flex; 8 position: fixed; 9 left: 0; 10 right: 0; 11 justify-content: space-between; 12 align-items: center; 13 14 15 16 17} 18nav { 19 display: none; 20} 21 22.toggle_btn { 23 width: 50px; 24 height: 50px; 25 background-color: gainsboro; 26 position: relative; 27 display: block; 28 top: 0; 29 left: 0; 30 cursor: pointer; 31 text-align: center; 32} 33 34.toggle_btn span { 35 position: absolute; 36 display: inline-block; 37 border: 1px solid black; 38 width: 50%; 39 height: 2px; 40 top: 50%; 41 left: 50%; 42 text-align: center; 43 44} 45 46.toggle_btn span:nth-child(1){ 47 transform: translate(-50%,10px); 48} 49.toggle_btn span:nth-child(2){ 50 transform: translate(-50%,-50%); 51} 52.toggle_btn span:nth-child(3){ 53 transform: translate(-50%,-10px); 54} 55 56.toggle_btn .open span:nth-child(1){ 57 transform: rotate(45deg); 58} 59.toggle_btn .open span:nth-child(2){ 60 opacity: 0; 61} 62.toggle_btn .open span:nth-child(3){ 63 transform: rotate(-45deg); 64} 65 66.a { 67 padding: 150px 20px; 68 69} 70 71.a h2 { 72 max-width: 1360px; 73 text-align: left; 74 margin-left: 100px; 75 76} 77 78.a-ul { 79 max-width: 1360px; 80 margin: 0 auto; 81 display: flex; 82 justify-content: space-between; 83 flex-wrap: wrap; 84 align-items: center; 85 list-style: none; 86 .a-li { 87 width: 23%; 88 } 89 .a-img { 90 width: 100%; 91 } 92 .a-a { 93 text-decoration: none; 94 } 95} 96.more-btn { 97 text-align: center; 98 margin-top: 30px; 99} 100 101.more-12 { 102 text-align: center; 103} 104 105.more-12 a { 106 padding: 30px; 107} 108 109footer { 110 display: flex; 111 justify-content: space-between; 112 align-items: center; 113} 114 115.footer-ul { 116 display: flex; 117 justify-content: space-between; 118} 119 120.footer-li { 121 padding: 30px; 122 list-style: none; 123} 124 125.c { 126 padding-right: 20px; 127}

jquery

1$(function(){ 2 3 4/*ハンバーガーメニュー*/ 5 $('toggle_btn').click(function(){ 6 $(this).toggleClass('open'); 7 $('span').toggleClass('open'); 8 }); 9 10/* ここには、表示するリストの数を指定します。 */ 11var moreNum = 8; 12 13/* 表示するリストの数以降のリストを隠しておきます。 */ 14$('.a-li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden'); 15 16/* 全てのリストを表示したら「もっとみる」ボタンをフェードアウトします。 */ 17$('.more-btn').on('click', function() { 18 $('.a-li.is-hidden').slice(0, moreNum).removeClass('is-hidden'); 19 if ($('.a-li.is-hidden').length == 0) { 20 $('.more-btn').fadeOut(); 21 } 22}); 23 24/* リストの数が、表示するリストの数以下だった場合、「もっとみる」ボタンを非表示にします。 */ 25$(function() { 26 var list = $(".a-ul li").length; 27 if (list < moreNum) { 28 $('.more-btn').addClass('is-btn-hidden'); 29 } 30}); 31 32$('.more-btn').click(function(){ 33 $('.more-12').show(); 34}); 35 36}); 37 38$('.more-btn').click(function(){ 39 $('.a-container h2').show(); 40 41}); 42 43 44

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2023/03/13 06:24 編集

HTTPサーバの設定の問題です。 5500 番ポートではどのようなサーバを使っていますか? 訂正です。404 だから見つからないだけですね。HTMLとmain.jsは同じディレクトリにありますか?
iceforest

2023/03/13 06:24

返信ありがとうございます。 今は、ローカルでコードを書いて、vscodeのopen with live serverで見ている段階で、レンタルサーバーには上げていません。
int32_t

2023/03/13 06:41

編集しているHTMLとmain.jsのローカルディスクでのフルパスと、Live Server で見ているHTMLのURLを開示してください。
iceforest

2023/03/13 07:01

模写サイトをローカルで作っている最中です。プロゲートを勉強して、jqueryの書き方がわかってきたので、色々書いていたら動かなくなりました。 まだ、細かい部分がわからないので、なぜ今の状況になったのかがわかりません。
int32_t

2023/03/13 09:20

HTMLのファイルパスはどうなってますか? C:\Users\masah\.vscode\mosya\10\index.html などですか?
iceforest

2023/03/13 10:04

HTMLのファイルパスは、こちらです。 C:\Users\masah\.vscode\mosya\10\index.html
iceforest

2023/03/13 10:33

買ったばかりのDELLのパソコンで、特にポートをいじったりしていません。
guest

回答2

0

ベストアンサー

ポートが5500を利用している理由はなにかありますか?
通常の80でやってみてください
また可能であれば拡張子jsに対してContent-type: application/x-javascriptのhttpヘッダを
返すよう設定してみてください

投稿2023/03/13 07:21

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

コメントより、ファイル構成が
C:\Users\〜\.vscode\mosya\10\index.html
C:\Users\〜\.vscode\mosya\10\main.js
で、アクセスしている URL が http://127.0.0.1:5500/10/index.html であれば、

index.html の main.js に対する <script> が以下のようになっているはずです。

html

1 <script src="10\main.js"></script>

または

html

1 <script src="10/main.js"></script>

質問文のように src="main.js" になっていたら、「GET http://127.0.0.1:5500/10/10/main.js net::ERR_ABORTED 404 (Not Found)」というエラーは起きません。

投稿2023/03/13 11:33

int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

iceforest

2023/03/13 14:05

両方試しましたが、jQueryが動作しません。 CSSもjQueryも、src="main.js" src=style.css のようにしないと動作しないようになっています。 10/style.css ではCSSでもこんな感じです。相対パスをそのまま使っても反映されない状態です。
int32_t

2023/03/13 14:59

> jQueryが動作しません。 現象を具体的に書いてください。エラーメッセージが変わらないということですか?
iceforest

2023/03/14 02:01

返信ありがとうございます。 具体的には、jQueryのコードを書いて保存を押してもその結果が反映せず、書いているコード全部が無視されているような状態です。リンクがつながっていないが一番近い感覚です。
iceforest

2023/03/14 04:54

はい、出ています。
int32_t

2023/03/14 05:08

ではやっぱり、index.html の <script> が src="main.js" になってないか、教えていただいたファイル構成が間違っているか、index.html が複数あって混乱しているか、ということでしょう。
int32_t

2023/03/14 05:16

エラーが出ている状態で、ブラウザで表示されている index.html のソースをブラウザ内でチェックして <script> を確認してみてください。
iceforest

2023/03/14 06:29

はい、やってみます。
iceforest

2023/03/14 10:23

今まで作ってきたサイトも、src="main.js"で動作しています。 vscodeで相対パスを出すと、必ずsrc="10/main.js"で出るのですが、 このパスだと動作しません。 設定ミスか何かなのでしょうか。
int32_t

2023/03/14 21:29

> vscodeで相対パスを出すと、必ずsrc="10/main.js"で出る ここの意味がわかりません。「vscodeで相対パスを出す」「src="10/main.js"で出る」とはどういう意味ですか? できるだけ具体的に書いてください。
iceforest

2023/03/15 04:24

item1.jpgという画像がindex.htmlと同じ階層にあった場合、imgのsrcに相対パスをコピーすると、item1.jpgと表示されないと、ブラウザに出ないのですが、必ず10/item1.jpgという風になってしまい、1回1回item1.jpgに直しているということです。
int32_t

2023/03/15 04:34

ああ、メニューからの相対パスのコピーですね。それは最初に開いたフォルダからの相対パスなので、そういうものです。 src="10/main.js" のままだと動かないのは当然のことなので、10/ を消すしかありません。
iceforest

2023/03/15 04:41

ありがとうございます。
iceforest

2023/03/15 11:58

拡張子jsに対してContent-type: application/x-javascriptのhttpヘッダを 返すよう設定、の部分を教えていただけませんか。 初心者なので、ググってみてもよくわかりませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問