検証ツールに下記のようなエラーがたくさん出てきます。
これは何をしたら消えるのでしょうか。
また、
Error in event handler: Error: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at findStyleSheets (<URL>)
at <URL>
Error in event handler: Error: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at findStyleSheets (chrome-extension://diebikgmpmeppiilkaijjbdgciafajmg/scripts/content-script.js:1014:12)
at chrome-extension://diebikgmpmeppiilkaijjbdgciafajmg/scripts/content-script.js:1052:13
こうなった経緯としては、
ドロワーメニューを実装してからです。↓↓
js
1 <!-- ここからドロワーメニュー --> 2 <script type="text/javascript"> 3 function toggleNav() { 4 var body = document.body; 5 var hamburger = document.getElementById('js-hamburger'); 6 var blackBg = document.getElementById('js-black-bg'); 7 8 hamburger.addEventListener('click', function () { 9 body.classList.toggle('nav-open'); 10 }); 11 blackBg.addEventListener('click', function () { 12 body.classList.remove('nav-open'); 13 }); 14 } 15 toggleNav(); 16 </script> 17 <!-- ここまでドロワーメニュー -->
html
1<header class="header"> 2 <div class="flex-sb"> 3 <p class="header-logo"><a href="/"><img class="header-logo-img" src="img/logo.png" alt="ロゴ">EXSAMPLE株式会社</a></p> 4 5 <!-- gnav --> 6 <nav class="gnav"> 7 <ul class="gnav-list slider"> 8 <li class="gnav-item"><a href="#strong">当社の強み</a></li> 9 <li class="gnav-item"><a href="#service">事業内容</a></li> 10 <li class="gnav-item"><a href="#works">施工実績</a></li> 11 <li class="gnav-item"><a href="#flow">施工の流れ</a></li> 12 <li class="gnav-item"><a href="#news">お知らせ</a></li> 13 <li class="gnav-item"><a href="#about">会社概要</a></li> 14 <li class="gnav-item"><a href="#faq">よくある質問</a></li> 15 </ul> 16 </nav><!-- /gnav --> 17 </div><!-- /flex-sb --> 18 <div class="hamburger" id="js-hamburger"> 19 <span class="hamburger__line hamburger__line--1"></span> 20 <span class="hamburger__line hamburger__line--2"></span> 21 <span class="hamburger__line hamburger__line--3"></span> 22 </div> 23 <div class="black-bg" id="js-black-bg"></div> 24 </header>
css
1/* ここからハンバーガーメニュー */ 2@media screen and (max-width: 959px) { 3 .gnav { 4 position: fixed; 5 right: -100vw; 6 top: 0; 7 width: 100vw; 8 height: 100vh; 9 padding-top: 80px; 10 background: $color-bg-sub; 11 transition: all .6s; 12 z-index: 200; 13 overflow: auto; 14 text-align: center; 15 } 16 17 .gnav-item { 18 display: block !important; 19 } 20 21 .hamburger { 22 position: absolute; 23 top: 0px; 24 right: 0; 25 width: 60px; 26 height: 55px; 27 cursor: pointer; 28 z-index: 300; 29 } 30 31 .hamburger__line { 32 position: absolute; 33 right: 20px; 34 width: 20px; 35 height: 3px; 36 background: #333; 37 transition: all .6s; 38 } 39 40 .hamburger__line--1 { 41 top: 18px; 42 } 43 .hamburger__line--2 { 44 top: 26px; 45 } 46 .hamburger__line--3 { 47 top: 34px; 48 } 49 50 .black-bg { 51 position: fixed; 52 top: 0; 53 left: 0; 54 width: 100vw; 55 height: 100vh; 56 z-index: 200; 57 background: $color-bg-sub; 58 opacity: 0; 59 visibility: hidden; 60 transition: all .6s; 61 cursor: pointer; 62 } 63 64 65 /* 表示された時用のCSS */ 66 .nav-open .gnav { 67 right: 0; 68 } 69 70 .nav-open .black-bg { 71 opacity: 0.8; 72 visibility: visible; 73 } 74 75 .nav-open .hamburger__line--1 { 76 transform: rotate(45deg); 77 top: 20px; 78 } 79 80 .nav-open .hamburger__line--2 { 81 width: 0; 82 left: 50%; 83 } 84 85 .nav-open .hamburger__line--3 { 86 transform: rotate(-45deg); 87 top: 20px; 88 } 89 90} 91/* ここまでハンバーガーメニュー */ 92 93/* ハンバーガーメニュー詳細調整 */ 94@media screen and (max-width: 959px) { 95 .gnav-item a.current::after { 96 border-bottom: none; 97 } 98 .gnav-item:last-child>a { 99 padding: 0; 100 } 101}
お詳しい方、どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー