Q&A
ご提示のコードを試してみましたが、user agent stylesheet は打ち消されていました。
環境の問題かと思います。
ハンバーガーメニュー作ってChromeブラウザで表示してみると、ハンバーガーメニュー内のメニューが消えません。CSSで該当クラスにdisplay:noneはかけてあります。調べてみるとuser agent stylesheetでdisplay:blockが適用されているので消えてくれないようです。
エディターからHTMLを開けた時は、980pxに設定してあるブレイクポイントでちゃんと表示・非表示になります。
HOME画面にある別のNavバーは何故か普通にdisplay:noneでブラウザでも消えてくれ、問題なく動作します。
ブラウザ上でもちゃんと動かすにはどうやってuser agent stylesheetのdisplay:blockを打ち消すことができますか
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="./css/normalize.css"> 7 <link rel="stylesheet" href="./css/style.css"> 8 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> 9 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 10 crossorigin="anonymous"></script> 11 <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> 12 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 13 <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> 14 <title>title</title> 15 </head> 16 17<body> 18 <!-- ハンバーガーメニュー --> 19 <div class="hamburger"> 20 <span></span> 21 <span></span> 22 <span></span> 23 </div> 24 <nav class="globalMenuSp"> 25 <ul> 26 <li><a href="index.html">HOME</a></li> 27 <li><a href="category.html">CATEGORY</a></li> 28 <li><a href="news.html">NEWS</a></li> 29 <li><a href="about.html">ABOUT</a></li> 30 <li><a href="contact.html">CONTACT</a></li> 31 </ul> 32 </nav> 33 <Script> 34 $(function() { 35 $('.hamburger').click(function() { 36 $(this).toggleClass('active'); 37 38 if ($(this).hasClass('active')) { 39 $('.globalMenuSp').addClass('active'); 40 } else { 41 $('.globalMenuSp').removeClass('active'); 42 } 43 }); 44 }); 45 </Script> 46</body>
CSS
1.globalMenuSp{ 2 display: none; 3} 4 5@media screen and (min-width:980px){ 6.globalMenuSp{ 7 display: block; 8} 9 10.globalMenuSp { 11 position: fixed; 12 z-index : 2; 13 top : 0; 14 left : 0; 15 color: #fff; 16 background: rgba(0,0,0,0.7); 17 text-align: center; 18 width: 100%; 19 opacity: 0; 20 transition: opacity .6s ease, visibility .6s ease; 21} 22 23nav.globalMenuSp ul { 24 margin: 0 auto; 25 padding: 0; 26 width: 100%; 27} 28 29nav.globalMenuSp ul li { 30 list-style-type: none; 31 padding: 0; 32 width: 100%; 33 transition: .4s all; 34} 35 36nav.globalMenuSp ul li:last-child { 37 padding-bottom: 0; 38} 39 40nav.globalMenuSp ul li:hover{ 41 background :#ddd; 42} 43 44nav.globalMenuSp ul li a { 45 display: block; 46 color: #fff; 47 padding: 1em 0; 48 text-decoration :none; 49} 50 51/* このクラスを、jQueryで付与・削除する */ 52nav.globalMenuSp.active { 53 opacity: 100; 54} 55}
試したこと
リセットCSSのHTML5 Doctor CSS Resetを入れてもダメでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
自己解決
確認ありがとうございます。おっしゃる通り打ち消しはされていて、単にHTML内のRespsive.cssを読み込む記述に誤りがあったようです。
ありがとうございました。
投稿2020/07/17 04:25
総合スコア5
0
これでいけるかと
.globalMenuSp{ display: none; } .globalMenuSp.active{ display: block; }
投稿2020/07/17 04:10
編集2020/07/17 04:14
総合スコア123
あなたの回答
tips
プレビュー
