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

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

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

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

HTML5

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

jQuery

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

解決済

jQueryが動かない

amagiri
amagiri

総合スコア60

CSS3

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

HTML5

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

jQuery

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

2回答

0評価

0クリップ

245閲覧

投稿2022/04/06 14:58

jQueryが動かない

自分で組んだテンプレートで二つの異なるサイトをコーディングしましたが、下に貼っているコードのサイトだけjQueryが効きません。テンプレートはヘッダーと、フッター下のjQueryに関する2つの<script>を記述しておいた簡単なものです。

実現したいこと

jQueryが動くようにしたい

該当のソースコード

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="description" content=""> <title></title> <script src="https://kit.fontawesome.com/19614859c0.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="main.css"> </head> <body> <!-- ====== header ====== --> <header> <div class="container"> <div id="header"> <h2 id="header-logo"><a href="#">My Work</a></h2> <nav id="header-nav"> <ul> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#"><i class="fa-solid fa-camera"></i></a></li> </ul> </nav> <button id="header-button"></button> </div> </div> </header> <!-- ====== main ====== --> <main> <img src="../images/mainvisual-pc.jpg" id="main-image"> <div class="container"> <div class="heading"> <h2>About</h2> </div> <div class="about-text"> <p class="about-big about">Xxxxx Ashley</p> <div class="about-p-about"> <p class="about-p about">2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan</p> <p class="about-p about">tel: 000-0000-0000</p> <p class="about-p about">url: www.xxxxxx.jp</p> <p class="about-p about">mail: xxx@xxxxxx.jp</p> </div> <p class="about-big about">プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="heading"> <h2>Works</h2> </div> <div class="works"> <img src="../images/works1.jpg"> <img src="../images/works2.jpg"> <img src="../images/works3.jpg"> <img src="../images/works4.jpg"> <img src="../images/works5.jpg"> <img src="../images/works6.jpg"> </div> <div class="heading"> <h2>News</h2> </div> <div class="news"> <dl> <div class="di"> <dt>2020.XX.XX</dt> <dd>デザイン雑誌「XXXXXX Vol.11』に掲載していただきました</dd> </div> <div class="di"> <dt>2020.XX.XX</dt> <dd>XX月XX日から写真集「XXXXXXX」の販売を開始します。</dd> </div> <div class="di"> <dt>2019.XX.XX</dt> <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> </div> <div class="di"> <dt>2019.XX.XX</dt> <dd>デザイン雑誌「XXXXXX Vol.10』に掲載していただきました。</dd> </div> <div class="di"> <dt>2019.XX.XX</dt> <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> </div> </dl> </div><!-- /news --> <div class="heading"> <h2>Contact</h2> </div> <form action="" method=""> <table> <tr> <th><label for="name">NAME</label></th> <td><input type="text" name="name" id="name"></td> </tr> <tr> <th><label for="e-mail">E-mali</label></th> <td><input type="text" name="e-nail" id="e-mail"></td> </tr> <tr> <th><label for="message">MESSAGE</label></th> <td><textarea name="message" id="message"></textarea></td> </tr> </table> <div class="submit-button"> <input type="submit" value="送信" id="submit"> </div> </form> </div><!-- /container --> </main> <!-- ====== footer ====== --> <footer> <p>&copy; 2020 My Work</p> </footer> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <srcipt src="script.js"></srcipt> </body> </html>

CSS

@charset "utf-8"; .container { max-width: 800px; margin: 0 auto; } /* ====== header ====== */ header { padding: 100px 0; } #header-logo { font-weight: normal; } #header-logo a { color: black; text-decoration: none; } #header { display: flex; align-items: center; justify-content: space-around; } #header-nav li { display: inline-block; padding-left: 25px; } #header-nav a { text-decoration: none; color: black; } #header-nav a:hover { opacity: 0.7; } button { display: none; } @media(max-width: 768px) { button { display: block; } #header-nav { width: 100%; height: calc(100% - 127px); display: none; background: white; opacity: 0.9; } #header-nav ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #header-button { background: url(../images/hamburger.png); background-size: cover; border-radius: 4px; width: 50px; height: 50px; } header { padding: 30px 0; } } /* ====== main ====== */ #main-image { width: 100%; height: 400px; object-fit: cover; } .heading { text-align: center; padding-top: 80px; } @media(max-width: 768px) { #main-image { object-position: 90% 0; } } /* about */ .about-p-about { padding: 27px 0; } .about-big { line-height: 1.5; font-size: 14px; } .about-p { margin: 4px; font-size: 14px; } .about-text { padding: 80px 12px 0; } /* works */ .works img { width: 33%; padding: 13px; box-sizing: border-box; } .works { display: flex; flex-wrap: wrap; } @media(max-width: 768px) { .works { flex-flow: column; } .works img { width: 100%; } } /* news */ .news dl { border-collapse: collapse; display: table; width: 100%; border-bottom: 1px solid #999; } .news .di { display: table-row; border-top: 1px solid #999; } .news dt, .news dd { display: table-cell; padding: 15px 0; font-size: 14px; box-sizing: border-box; } .news dt { padding-left: 10px; padding-right: 20px; white-space: nowrap; } .news dd { width: 79%; padding-right: 10px; } @media(max-width: 768px) { .news { padding: 0 10px; } .news dt, .news dd { font-size: 12px; } } /* contact */ form { padding-bottom: 100px; } table { padding: 0 5px; } th { font-weight: normal; text-align: left; width: 150px; vertical-align: top; } #name,#e-mail { width: 645px; line-height: 2; } textarea { height: 9em; width: 645px; resize: none; } #name,#e-mail,textarea { border: 1px solid rgb(223, 223, 223); } .submit-button { text-align: center; padding-top: 50px; } td { line-height: 0; } #submit { padding: 18px 90px; background: rgb(0, 0, 17); color: white; border: 1px solid rgb(0, 0, 17); } #submit:hover { cursor: pointer; background-color: white; border: 1px solid rgb(0, 0, 17); color: black; } @media(max-width: 768px) { form table,form tbody,form tr,form th,form td,label{ display: block; } form tbody,form tr,form th,form td,#name,#e-mail,#message,label { width: 100%; box-sizing: border-box; } form tr { padding-top: 20px; } } /* ======footer ====== */ footer { text-align: center; background: rgb(31, 31, 31); padding: 15px 0; } footer p { color: white; font-size: 10px; margin: 0; vertical-align: middle; }

jQuery

$(function(){ alert('ok') });

試したこと

$(function(){ ~ });を
$(window).on('load', function() { ~ });、
$(document).ready(function() { ~ });に変えましたが変化なし。
検証ツールでもファイルのエラーは確認できませんでした。
全角スペースもありません。

補足情報(FW/ツールのバージョンなど)

dynabook V72/JLE
型番:PV82JLECNRDQE

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2022/04/06 20:20

CSSもHTMLもほぼなくして最小構成でそこだけを試してみて結果を追記してください。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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

jQuery

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