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

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

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

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

jQuery

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

HTML

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

Q&A

0回答

337閲覧

[jQuery]ハンバーガーメニュー、カルーセルを実装する

kaori_330

総合スコア1

JavaScript

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

jQuery

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

HTML

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

0グッド

0クリップ

投稿2023/03/15 10:07

編集2023/03/15 11:03

実現したいこと

jQueryでハンバーガーメニュー、カルーセルを実装する

前提

ハンバーガーメニューのみ実装した際は正常に稼働していたのですが、
カルーセルを追加した途端に稼働しなくなりました。

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

エラーなし

該当のソースコード

HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS読込 --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- Googleフォント --> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://unpkg.com/ress@4.0.0/dist/ress.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/cf80f90314.js" crossorigin="anonymous"></script> <!-- Animate.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <link href="css/style.css" rel="stylesheet"> </head> <body> <!-- ヘッダー --> <header class="header"> <!-- ロゴ --> <a href="#"><img src="" alt="" class="header-logo"></a> <!-- ハンバーガーボタン --> <button type="button" class="hamburger-button"> <i class="fas fa-bars"></i> </button> </header> <!-- ナビゲーション --> <div class="hamburger-menu"> <nav class="hamburger-menu-nav"> <ul class="hamburger-menu-nav-list header-nav-list-group"> <li class="hamburger-menu-nav-list-item"><a href="#feature ">施設概要</a></li> <li class="hamburger-menu-nav-list-item"><a href="#access">アクセス</a></li> <li class="hamburger-menu-nav-list-item"><a href="#faq">お問合せ</a></li> </ul> </nav> </div> <!-- メイン --> <main class="main"> <!-- カバー --> <section class="cover"> <!-- カバー上部・カルーセル --> <div class="cover-slick"> <!-- カルーセル1 --> <div class="cover-slick-item"> <picture> <!-- SP --> <source media="(max-width: 767px)" srcset="image/cover_01_sp.jpg"> <!-- PC --> <source media="(min-width: 768px)" srcset="image/cover_01_pc.jpg"> <img class="cover-img" src="image/cover_01_pc.jpg" alt=""> </picture> </div> <!-- カルーセル2 --> <div class="cover-slick-item"> <picture> <!-- SP --> <source media="(max-width: 767px)" srcset="image/cover_02_sp.jpg"> <!-- PC --> <source media="(min-width: 768px)" srcset="image/cover_02_pc.jpg"> <img class="cover-img" src="image/cover_02_pc.jpg" alt=""> </picture> </div> <!-- カルーセル3 --> <div class="cover-slick-item"> <picture> <!-- SP --> <source media="(max-width: 767px)" srcset="image/cover_03_sp.jpg"> <!-- PC --> <source media="(min-width: 768px)" srcset="image/cover_03_pc.jpg"> <img class="cover-img" src="image/cover_03_pc.jpg" alt=""> </picture> </div> </div> </section> </main> <!-- JavaScript読込 --> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- カルーセル --> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <!-- main.js --> <script src="js/main.js"></script> </body> </html>
CSS @charset "UTF-8"; /* 文字コードの指定 */ body { font-family: "Noto Sans JP", sans-serif, "Noto Serif JP", serif; line-height: 1.75; } a { color: #000; text-decoration: none; } img { max-width: 100%; height: auto; vertical-align: bottom; } li { list-style: none; } /* フォント:個別指定 ───────────────────────────────── */ .serif { font-family: "Noto Serif JP", serif; font-weight: 500; } /* ヘッダー調整/最大横幅指定【SP】 ───────────────────────────────── */ .header { position: fixed; display: flex; align-items: center; width: 100%; height: 3.7rem; background-color: #fff; padding-left: 0.96rem; } /* ヘッダー:タイトル ───────────────────────────────── */ @media (max-width: 767px) { .header-title { color: #fff; font-size: 1.14rem; font-weight: bold; padding-left: 2rem; padding-top: 0.2rem; line-height: 1rem; } .header span { font-size: 0.5rem; } } /* ヘッダー:ハンバーガーボタン ───────────────────────────────── */ .hamburger-button { position: fixed; right: 0.9rem; top: 0.74rem; font-size: 2rem; color: #606060; line-height: 2rem; } /* ハンバーガーメニュー:SP表示のみに指定 ───────────────────────────────── */ @media (max-width: 767px) { .hamburger-menu { position: fixed; z-index: 1; top: 3.8rem; height: 6.64rem; width: 100%; background-color: rgb(255,255,255,70%); opacity: 0; visibility: hidden; } } /* ハンバーガー:ナビゲーション【SP】 ───────────────────────────────── */ @media (max-width: 767px) { .hamburger-menu-nav { display: flex; line-height: 1.63rem; font-size: 1rem; margin-top: 0.8rem; margin-left: 0.86rem; } } @media (max-width: 767px) { .cover-img { margin-top: 3.8rem; width: 100%; } }
Javascript /* ハンバーガーメニュー */ var hamburger = $('.hamburger-menu'); $('.hamburger-button').on('click', function () { hamburger.toggleClass('hamburger-menu-active'); }); $(window).on('resize', function () { hamburger.removeClass('hamburger-menu-active'); }); /* カルーセル */ $('.cover-slick').slick({ infinite: true, dots: false, autoplay: true, arrows: false, fade: true, autoplaySpeed: 3000 });

試したこと

</body>の直下に main.js を記述しましたが、解消しませんでした。 どなたかアドバイスいただけますと大変助かります。

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

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

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

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

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

m.ts10806

2023/03/15 10:10

コピペで再現できるよう、HTMLも一通りご提示ください。 あとマークダウンのcode内にはコードのみ提示を。再現確認の際に削除する手間が発生します。
m.ts10806

2023/03/15 10:39

コード全部必要かどうかは精査されたほうが良いと思います。 あくまで「コピペで再現できる程度」のものです。 https://teratail.com/help/question-tips#questionTips35 の「アドバイス」参照。 どれくらいの量で再現するかは投稿者しか調べられませんので。
m.ts10806

2023/03/15 10:40

精査ししている間に問題点が見えてきて自己解決できることもあるので、「調べたこと」としても必要な工程だと思います。
kaori_330

2023/03/15 10:46 編集

初めての利用だったため勝手がわからずすみません。 ある程度精査し割愛したコードを記載したものの、そちらも文字数オーバーだったため、字数制限のないコメント欄に全文記載していました。リンク先確認致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問