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

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

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

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

HTML

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

CSS

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

Q&A

1回答

407閲覧

Javascriptを機能させたい

r4all

総合スコア2

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2023/02/20 07:40

Javascriptを機能させたい

  • htmlにおいてjavascriptを機能させたい
  • メニューバーをクリックした際に、メニューを表示させたい

前提

html, css, javascriptを使用してホームページを作成しています。
メニューバーを作成する際に、こちらのサイトを参考にjavascriptを書きましたが、記載したコードが認識されず、メニューバーをクリックしても反応がない状態です。
また、現段階ではエラーが表示されていません。(なので、本当に何が原因で動作しないのかがわからないです、、)

  • html名:index1.html
  • css名:stylesheet1.css
  • javascript名:5-2-3.js

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5<meta charset="utf-8"> 6<title>5-2-3 3本線が1本線に</title> 7<meta name="description" content="書籍「動くWebデザインアイディア帳」のサンプルサイトです"> 8 9<meta name="viewport" content="width=device-width,initial-scale=1.0"> 10<!--==============レイアウトを制御する独自のCSSを読み込み===============--> 11<link rel="stylesheet" type="text/css" href="stylesheet1.css"> 12 13</head> 14 15<body> 16 <div class="container"> 17 <header class="header"> 18 <div class="header__inner"> 19 <h1 class="header__title header-title"> 20 <a href="#">ロゴ</a> 21 </h1> 22 23 <nav class="header__nav nav" id="js-nav"> 24 <ul class="nav__items nav-items"> 25 <li class="nav-items__item"><a href="">メニュー</a></li> 26 <li class="nav-items__item"><a href="">メニュー</a></li> 27 <li class="nav-items__item"><a href="">メニュー</a></li> 28 <li class="nav-items__item"><a href="">メニュー</a></li> 29 </ul> 30 </nav> 31 32 <button class="header__hamburger hamburger" id="js-hamburger"> 33 <span></span> 34 <span></span> 35 <span></span> 36 </button> 37 </div> 38 </header> 39 <main> 40 <div class="main"> 41 メインコンテンツエリア 42 </div> 43 </main> 44 <footer class="footer"> 45 <div> 46 フッターエリア 47 </div> 48 </footer> 49 </div> 50 <script type="text/javascript" src="5-2-3.js"></script> 51 </body> 52</html> 53

css

1a { 2 text-decoration: none; 3} 4 5ul, 6li { 7 list-style: none; 8} 9 10 11main { 12 background-color: #f1f1f1; 13 height: 800px; 14 display: flex; 15} 16 17 18.main { 19 margin: auto; 20} 21 22.footer { 23 background-color: #f6f6f6; 24 height: 200px; 25 display: flex; 26} 27 28.footer div { 29 margin: auto; 30} 31 32 33/* ヘッダー */ 34 35 36.header { 37 background-color: white; 38 width: 100%; 39 height: 50px; 40 position: fixed; 41 top: 0; 42 left: 0; 43 right: 0; 44 z-index: 999; 45} 46 47.header__inner { 48 padding: 0 20px; 49 display: flex; 50 align-items: center; 51 justify-content: space-between; 52 height: inherit; 53 position: relative; 54} 55 56 57/* ヘッダーのロゴ部分 */ 58.header__title { 59 width: 80px; 60} 61 62 63@media screen and (min-width: 960px) { 64 .header__title { 65 width: 120px; 66 } 67} 68 69.header__title img { 70 display: block; 71 width: 100%; 72 height: 100%; 73} 74 75/* ヘッダーのナビ部分 */ 76 77.header__nav { 78 position: absolute; 79 right: 0; 80 left: 0; 81 top: 0; 82 width: 100%; 83 height: 100vh; 84 transform: translateX(100%); 85 background-color: #fff; 86 transition: ease .4s; 87} 88 89 90@media screen and (min-width: 960px) { 91 .header__nav { 92 position: static; 93 transform: initial; 94 background-color: inherit; 95 height: inherit; 96 display: flex; 97 justify-content: end; 98 width: 50%; 99 } 100} 101 102 103@media screen and (min-width: 960px) { 104 .nav__items { 105 width: 100%; 106 display: flex; 107 align-items: center; 108 height: initial; 109 justify-content: space-between; 110 } 111} 112 113.nav-items { 114 position: absolute; 115 top: 50%; 116 left: 50%; 117 transform: translate(-50%, -50%); 118 padding: 0; 119} 120 121 122 123@media screen and (min-width: 960px) { 124 .nav-items { 125 position: inherit; 126 top: 0; 127 left: 0; 128 transform: translate(0, 0); 129 130 } 131} 132 133/* ナビのリンク */ 134.nav-items__item a { 135 color: black; 136 width: 100%; 137 display: block; 138 text-align: center; 139 font-size: 20px; 140 margin-bottom: 24px; 141 color: black; 142} 143 144.nav-items__item:last-child a { 145 margin-bottom: 0; 146} 147 148@media screen and (min-width: 960px) { 149 .nav-items__item a { 150 margin-bottom: 0; 151 } 152} 153 154 155/* ハンバーガーメニュー */ 156 157.header__hamburger { 158 width: 48px; 159 height: 100%; 160 161} 162 163.hamburger { 164 background-color: transparent; 165 border-color: transparent; 166 z-index: 9999; 167} 168 169@media screen and (min-width: 960px) { 170 .hamburger { 171 display: none; 172 } 173} 174 175/* ハンバーガーメニューの線 */ 176.hamburger span { 177 width: 100%; 178 height: 1px; 179 background-color: #000; 180 position: relative; 181 transition: ease .4s; 182 display: block; 183} 184 185.hamburger span:nth-child(1) { 186 top: 0; 187} 188 189.hamburger span:nth-child(2) { 190 margin: 8px 0; 191} 192 193.hamburger span:nth-child(3) { 194 top: 0; 195} 196 197 198/* ハンバーガーメニュークリック後のスタイル */ 199.header__nav.active { 200 transform: translateX(0); 201} 202 203.hamburger.active span:nth-child(1) { 204 top: 5px; 205 transform: rotate(45deg); 206} 207 208.hamburger.active span:nth-child(2) { 209 opacity: 0; 210 211} 212 213.hamburger.active span:nth-child(3) { 214 top: -13px; 215 transform: rotate(-45deg); 216} 217

javascript

1const ham = $('#js-hamburger'); 2const nav = $('#js-nav'); 3ham.on('click', function () { //ハンバーガーメニューをクリックしたら 4 ham.toggleClass('active'); // ハンバーガーメニューにactiveクラスを付け外し 5 nav.toggleClass('active'); // ナビゲーションメニューにactiveクラスを付け外し 6}); 7

試したこと

他にも参考にしたサイトのhtml, css, javascriptはあるのですが、それらの時も、クリックしても反応がありませんでした。
特にエラーメッセージが表示されている訳でもないのですが、どうしてもjavascriptが何故反映されないのか知りたいので、どうぞよろしくお願いいたします。

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2023/02/20 07:45

ブラウザのデベロッパーツールを使ってデバックしてください。それがあなたの環境で今すぐできるのはあなただけです。回答者閲覧者はデバッガではありません。
int32_t

2023/02/20 07:47

> また、現段階ではエラーが表示されていません。 コードがこの通りなら、ブラウザの開発者ツールのコンソールにエラーが出ているはずです。
hoshi-takanori

2023/02/20 07:51

jquery を読み込んでないような…。
r4all

2023/02/20 08:23

皆様、回答ありがとうございます。 すぐデベロッパーツールで原因がないか見てみます。また、jqueryの読み込み方についても調べてみます! 手段を教えていただきありがとうございます!!助かりました。
退会済みユーザー

退会済みユーザー

2023/02/20 08:32

頑張ってください。そういう風に答えられる人はツールの使い方などが分かれば自己解決できると思います。
guest

回答1

0

もう解決しているかもしれませんが…
<head> タグの中に以下の行を追加してjQueryを読み込ませてください。

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

これだけで解決します。
なお、ブラウザの幅が広い場合ハンバーガーメニューが表示されないようになっているのでブラウザの幅を狭くする必要があります。

投稿2023/02/21 02:33

YakumoSaki

総合スコア2027

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問