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

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

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

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

HTML5

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

JavaScript

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

解決済

ハンバーガーメニューをアクティブにした後の画面のCSSの編集がうまくいきません。

y-sasaki
y-sasaki

総合スコア44

CSS3

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

HTML5

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

JavaScript

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

2回答

0リアクション

0クリップ

182閲覧

投稿2022/08/04 10:49

前提

ハンバーガーメニューをアクティブにした後の画面の[無料体験に申し込む]ボタンのCSSの編集がうまくいきません。

実現したいこと

ハンバーガーメニューをアクティブにした後の画面の[無料体験に申し込む]ボタンのCSSの編集して背景色を白色に変えたいのですがうまくいかず、困ってます。

該当のソースコード

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>課題テンプレ</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script> <script src="js/script.js"></script> </head> <body> <header id="header"> <div class="logo"> <h1 class="title">BBB</h1> <span>英会話スクール</span> </div> <nav id="navi"> <ul class="menu"> <li><a href="#reason">BBBが選ばれる理由</a></li> <li><a href="#voice">受講生の声</a></li> <li><a href="#summary">スクールの概要</a></li> </ul> <a class="btn" id=" active_btn"href="#">無料体験に申し込む</a> </nav> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </header> <main> <div id="mainvisual"> <img src="../web3/img/mainvisual1.jpg" alt="main1"> </div> <div class="text"> <P class="title">話して学ぼう<br> BBB英会話スクール </P> <a class="btn" href="#">無料体験はこちらから </a> </div> </body> </html>

CSS

*{ margin:0; padding:0; } .logo{ color: red; vertical-align: bottom; line-height: 25px; } .logo.active{ color: white; } .title.active{ text-shadow: none; } body.active{ background: red; } .title{ text-align: left; font-size:45px; font-weight: bold; text-shadow: 0 4px 6px #fff; } #header{ padding: 40px 0 0 50px; } .logo span{ vertical-align: bottom; font-size: 15px; } #navi{ visibility: hidden; transition: 1.0s; } main.active, footer.active{ opacity: 0; } .btn.active{ border: none; width: 250px; margin: 0 auto; border-radius: 0%; border: #fff solid 1px; color: white; } .menu li{ margin-bottom: 20px; } .menu.active{ color: white; opacity:1; z-index: 5; } #navi.active{ margin-top: 30px; left: 470px; position: fixed; visibility: visible; } #navi.active a{ color: white; } .hamburger{ background-color: #ff2a2a; position: fixed; width: 100px; height: 100px; top: 0; right: 0; z-index: 30; cursor: pointer; transition: 0.3s; } .hamburger span{ width: 35px; height: 2px; position: absolute; left: 33px; background: white; } .hamburger span:nth-child(1){ top: 24px; transition: 1.0s; } .hamburger span:nth-child(1).active{ transform: rotate(45deg); top: 38px; } .hamburger span:nth-child(2){ top: 40px; } .hamburger span:nth-child(2).active{ display: none; } .hamburger span:nth-child(3){ top: 55px; transition: 1.0s; } .hamburger span:nth-child(3).active{ transform: rotate(-45deg); top:40px } .btn{ background-color: #ff2a2a; border-bottom: 6px solid #9a0413; border-radius: 10px; color: #fff; font-size: 1.5rem; display: block; padding: 15px 40px; margin-top: 20px; text-align: center; transition: 0.3s; position: relative; text-decoration: none; transition: 0.3s } .btn::after{ content: ""; width: 16px; height: 16px; border-top: solid 3px #fff; border-right: solid 3px #fff; transform: rotate(45deg); position: absolute; top: 26px; right: 30px; } .btn.active::after{ border: none; } .btn:hover { transform:scale(1.2); } #active_btn:hover{ background-color: white; } : 0; } /* ウィンドウ幅が0〜479pxの場合に適用するCSS */ @media screen and ( max-width:640px ) { #header ,#navi ,main, #voice ,.student,.student dt,.student dd,.summary-list div,footer,.footmenu{ width: 100%; } body.active{ width: 100%; background: red; } .logo.active{ display: block; text-align: center; color: white; } .hamburger{ right:0; } .text{ top: 350px; left: 0; } .title{ font-size: 40px; } .slide{ width: 80%; margin: 0 auto; box-sizing: border-box; } .student div{ flex-direction: column; } .student div:nth-child(2) { flex-direction:column } .student dt { align-items: center; } .footmenu{ align-items: center; display: flex; flex-wrap: wrap; } }

javascript

$(function(){ $('.hamburger').on('click', function() { $('body,.title,.logo,.hamburger, .hamburger span:nth-child(1), .hamburger span:nth-child(2),.hamburger span:nth-child(3),.logo,#navi,.btn,main,footer,body').toggleClass('active'); }); }); よろしくお願いします。

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

jem32o

2022/08/04 13:30

htmlのid=" active_btn"href="#" こういうactive_btn前の半角スペースとかhrefがidのidのダブルクォーテーションがくっついていたり、 cssの.logo.activeのように「.logo .active」logo後ろと「.」前にスペースないとかでcss機能していないところ多々あるのでまずそういうの見直すべきでは?

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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

JavaScript

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