質問編集履歴

1 不足大変失礼いたしました。コード(html/css/js)および開発環境を追加いたしました。よろしくお願いいたします。

hayakawatakuma

hayakawatakuma score 21

2019/04/05 15:44  投稿

injection.jsに関するエラーについて
デベロッパーツールにコンソール画面にて、
下記エラー?が表示されます。
![イメージ説明](421983c460cbe85e15c8e214c46ccf24.png)
injection.jsに関するエラーと表示されておりますが、よく分からず。。。。
こちらの表記を削除するにはどうしたらいいか教えて頂けますか?
試したこと
jsに関するエラーかと推測し、jsファイルを全て削除してみましたがダメでした。。
jsに関するエラーかと推測し、jsファイルを全て削除してみましたがダメでした。。
追記-----------------------
作業環境:gulp
PC:mac OS
検証ブラウザ:Chrome
自身のPCおよびChromeのコンソール画面にのみ(他のブラウザでは特に表示されず。)表示されるエラーでした。
(他の方のChromeのコンソール画面では表示されませんでした)
```HTML
<!doctype html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>テスト</title>
   <meta name="description" content="">
   <meta name="keywords" content="">
   <meta name="viewport" content="width=device-width">
   <meta property="og:type" content="website">
   <meta property="og:site_name" content="">
   <meta property="og:url" content="[サイトURL絶対パス]">
   <meta property="og:title" content="">
   <meta property="og:description" content="">
   <!-- ↓アイコン -->
   <link rel="icon" type="image/x-icon" href="/shared/img/favicon.ico">
   <!-- ↓stylesheets -->
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/slick-theme.css">
   <link rel="stylesheet" href="css/slick.css">
</head>
<body id="top">
   <div class="container">
       <!--#include virtual="shared/include/header.html"-->
       <!--#include virtual="shared/include/side_menu.html"-->
       <div class="bodyArea">
           <!-- この中にコンテンツ -->
           <main class="main_contants">
               <section class="top-sec">
                   <div class="slick-slider">
                       <div><a href=""><img src="/shared/img/top/slide1.png" alt="スライド1"></a></div>
                   </div>
               </section>
               <section class="top-sec01">
                   <div class="section-in flex f-sb f-wp">
                       <div class="news-ttl-box">
                           <h2>新着情報<span>NEWS</span></h2>
                       </div>
                       <div class="news-list-box">
                           <a href="">
                           <dl>
                                   <dt><time>2019.2</time>タイトル</dt>
                                   <dd>テキストテキストテキストテキストテキストテキスト</dd>
                           </dl>
                           </a>
                           
                           <p class="taC"><a href="" class="default-btn">ニュース一覧</a></p>
                       </div>
                   </div>
               </section>
               <section class="top-sec02">
                   <div class="section-in">
                       <ul class="flex f-sb f-wp">
                           <li><a href=""><img src="/shared/img/top/top_sec02_bnr1.jpg" alt=""></a></li>
                           <li><a href=""><img src="/shared/img/top/top_sec02_bnr2.jpg" alt=""></a></li>
                           <li><a href=""><img src="/shared/img/top/top_sec02_bnr3.jpg" alt=""></a></li>
                       </ul>
                   </div>
               </section>
               <!--#include virtual="shared/include/footer.html"-->
           </main>
           <!-- ここまでコンテンツ -->
       </div><!-- /.bodyArea -->
   </div><!-- /.container -->
   <!-- ↓js -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script src="shared/js/slick.min.js"></script>
   <script src="shared/js/common.js"></script>
</body>
</html>
```
```SASS
/*--------------------------------------------------------------
   html/body
---------------------------------------------------------------*/
* {
   box-sizing: border-box;
}
html {
   font-size: 62.5%;
}
body {
   color: #333;
   line-height: 1.2;
   word-break: break-word;
   width: 100%;
   font-weight: 300;
   font-size: 1.6rem;
   letter-spacing: 0.01em;
}
/*------------------------------------------------------
   ボタン
--------------------------------------------------------*/
.default-btn {
   display: inline-block;
   width: 300px;
   text-align: center;
   text-decoration: none;
   outline: none;
   height: 45px;
   line-height: 43px;
   transition: 0.3s;
   background-color: #821717;
   border: 2px solid #821717;
   color: #fff;
   border-radius: 50px;
   position: relative;
   font-weight: 600;
   &:after {
       content: "";
       display: block;
       width: 8px;
       height: 8px;
       border-top: 2px solid #fff;
       border-right: 2px solid #fff;
       transform: rotate(45deg);
       position: absolute;
       right: 25px;
       top: calc(50% - 4px);
   }
   &:hover {
       background-color: #fff;
       border-color: #821717;
       color: #821717;
       &:after {
           border-top: 2px solid #821717;
           border-right: 2px solid #821717;
       }
   }
}
/*------------------------------------------------------
   ホバーアクション
--------------------------------------------------------*/
a img {
   transition: .2s;
}
a img:hover {
   opacity: .6;
}
/*------------------------------------------------------
   幅
--------------------------------------------------------*/
.section-in {
   max-width: 1200px;
   width: 95%;
   margin: 0 auto;
   padding: 80px 0;
}
.main_contants > .section-in {
   width: 95%;
   padding: 80px 0 40px;
}
.main_contants {
   left: 220px;
   position: absolute;
   width: calc(100% - 220px);
   background: url(../../shared/img/under_bg1.jpg) no-repeat;
   background-size: 100%;
   background-position-x: right;
}
//--------------------------------------------------------------
//   1200px以上
//--------------------------------------------------------------
@include media(ll) {
   .section-in {
       width: 1200px;
       min-width: 950px;
   }
}
//--------------------------------------------------------------
//   タブレット
//--------------------------------------------------------------
@include media(l) {
   .section-in {
       width: 95%;
   }
}
//--------------------------------------------------------------
//   スマートフォン
//--------------------------------------------------------------
@include media(s) {
   .main_contants {
       left: 0;
       top: 65px;
       width: 100%;
       overflow: hidden;
   }
   .section-in {
       width: 100%;
       max-width: 100%;
       min-width: 100%;
       padding: 60px 20px;
   }
   .main_contants > .section-in {
       padding: 60px 20px 0;
   }
   //スイッチ
   .pc {
       display: none;
   }
   .sp {
       display: block;
   }
   //ボタン
   .default-btn {
       width: 100%;
   }
   //タイトル / テキスト
   .heading-l {
       font-size: 3rem;
       padding-left: 25px;
       top: -25px;
       &:before {
           height: 125px;
       }
   }
   .heading-m {
       margin-bottom: 40px;
   }
   .default-txt {
       text-align: justify;
   }
}
/*--------------------------------------------------------------
TOP-CSS
---------------------------------------------------------------*/
.under-bottom-img {
   position: relative;
   bottom: -90px;
   max-width: 1200px;
   margin: -100px auto 0;
}
#top {
   .main_contants {
       background: none;
   }
   .under-top-img {
       display: none;
   }
   .top-sec {
       .top-sec-bg {
           position: absolute;
           top: 0;
           left: 0;
           width: 30%;
           z-index: -1;
       }
   }
   //top-sec01-----------------
   .top-sec01 {
       background: url("../../shared/img/top/top_sec01_bg.jpg") no-repeat;
       .news-ttl-box {
           background: #fff;
           width: 18%;
           color: #7bb8fb;
           padding: 1.6em;
           min-height: 150px;
           height: 100%;
           h2 {
               font-size: 2.2rem;
               font-weight: bold;
               span {
                   display: block;
                   margin-top: 5px;
               }
           }
       }
       .news-list-box {
           width: 79%;
           background: rgba(255,255,255,.7);
           padding: 30px 40px;
           dl {
               border-bottom: 1px solid #a3a3a3;
               padding-bottom: 20px;
               margin-bottom: 20px;
               dt {
                   color: #821717;
                   width: calc(100% - 70px);
                   font-weight: bold;
                   time {
                       width: 70px;
                       display: inline-block;
                   }
                   &::after {
                       content: '';
                       display: inline-block;
                       width: 20px;
                       height: 20px;
                       background-image: url("../../shared/img/top/news_arrow.png");
                       background-size: contain;
                       vertical-align: middle;
                       margin: -3px 0 0 7px;
                   }
               }
               dd {
                   margin-top: 10px;
                   margin-left: 70px;
               }
           }
       }
   }
   //top-sec02------------------
   .top-sec02 {
       ul {
           li {
               width: 49%;
               &:last-child {
                   width: 100%;
                   margin-top: 1.5em;
               }
           }
       }
   }
}
//--------------------------------------------------------------
//   スマートフォン
//--------------------------------------------------------------
@include media(s) {
   .under-top-img {
       max-width: 100%;
   }
   .under-bottom-img {
       bottom: 0;
       margin-top: 0;
       max-width: 100%;
   }
   #top {
       //top-sec01-----------------
       .top-sec01 {
           background-size: cover;
           .news-ttl-box {
               width: 50%;
               margin: 0 auto 20px;
               height: auto;
               min-height: auto;
               background: none;
               text-align: center;
               padding: 0;
               color: #fff;
           }
           .news-list-box {
               width: 100%;
               padding: 20px;
               margin-top: 20px;
               dl {
                   dt {
                       width: 100%;
                   }
                   dd {
                       margin-left: 0;
                       line-height: 1.4em;
                   }
               }
           }
           .section-in {
               padding: 60px 20px;
           }
       }
       //top-sec02------------------
       .top-sec02 {
           ul {
               li {
                   width: 80%;
                   margin: 0 auto 25px;
                   &:last-child {
                       margin-top: 0;
                   }
               }
           }
       }
       .under-img-area {
           bottom: 0;
           margin-top: -120px;
       }
   }
}
```
```js
$(function() {
 // ハンバーガーメニュー開閉
 $(".menu-mobile").click(function(e) {
   $(".global_navi").toggleClass('show-on-mobile');
   e.preventDefault();
 });
 $('.menu-mobile').on('click', function() {
   $(this).toggleClass('menu-active');
   return false;
 });
 // closeボタンで閉じる
 $(".menu_close").on('click', function() {
   if ($(window).width() <= 767) {
     $('.menu-mobile').removeClass('menu-active');
     $('.global_navi').removeClass('show-on-mobile');
   }
 });
// サブメニューボタン開閉
$(".sub_switch > a > span").click(function(e) {
 if ($(window).width() <= 767) {
   $(this).parents('.sub_switch').children("ul").fadeToggle(150);
   $(this).parents('.sub_switch').toggleClass('menu-open');
   return false;
 }
});
//スムーススクロール
var headerHight = 100;
$('a[href^="#"]').on('click', function() {
 var speed = 500;
 var href = $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 var position = target.offset().top - headerHight;
 $('body,html').animate({
   scrollTop: position
 }, speed, 'swing');
 return false;
});
});
```
  • JavaScript

    37926 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る