質問編集履歴

2 コード画像の追記

roronoazoro

roronoazoro score 67

2017/01/01 18:55  投稿

ドキュメントルートに関して
jquery本体の読み込みについて質問です。
バージョンjquery-3.1.1.min.jsを読み込む際にどうしてもエラーが出てしまいます。
前回質問したものと同じで恐縮なんですが、うまくいかないのです。
また、googleフォントの読み込みも同じくうまくいきません。
jqueryの読み込みはajaxだとうまくいきます。
前回質問させていただいた時は、ドキュメントルートなるものが原因で、1階層上がることが読み込まない原因でした。今回は同階層にjsフォルダを置いているにもかかわらず読み込んでくれません。
googleフォントの方も、同じ原因で読み込んでくれないのかなと思っています。
ドキュメントルートを調べてみたもののイマイチ、ピンときておりません。
原因わかる方いましたらよろしくお願いします。
```ここに言語を入力
<!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">
<link rel='stylesheet' href='css/font-awesome.min.css'>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script src='./js/jquery-3.1.1.min.js'></script>
<script src='./js/c'></script>
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id='container'>
<!--スライダー-->
<ul class="bxslider">
 <li><img src="img/pict1.jpg" alt=""></li>
 <li><img src="img/pict2.jpg" alt=""></li>
</ul><!--#bxslider-->
</div><!--#container-->
</body>
</html>
```  
 
```ここに言語を入力  
/*script.jsの中身*/
/*.bxslider*/
$(document).ready(function(){
   $('.bxslider').bxSlider({
   auto: true,//自動切り替えの有無
   prevText: '<', //前へのテキスト
   nextText: '>', //次へのテキスト
   pause: 5500,
   speed:800,
   mode:'fade',
   });
});
/*ページスクロールスピード*/
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
 var speed = 400; // ミリ秒
// アンカーの値取得
 var href= $(this).attr("href");
// 移動先を取得
 var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
 var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
   return false;
  });
  });
 
```
現在webサイト制作してまして、スライダーとページスクロールに関連した部分のhtmlを省略しております。
現![イメージ説明](e7f89fe70933b58dcbc9053e40a14f2d.png)ト制作してまして、スライダーとページスクロールに関連した部分のhtmlを省略しております。
それが原因かとも思ったのですが、省略してないものでも、同じようにエラーとなりました。
![イメージ説明](37ba45dceb9d1466b0f4d2681ccbdc71.png)
![イメージ説明](8b4e03b3777328b5f11215404c1b1c3c.png)
![イメージ説明](1ec7bf5acc32643c824624179160ea94.png)
![イメージ説明](739840ce011e4af6ca3620906841d643.png)
![イメージ説明](739840ce011e4af6ca3620906841d643.png)
画像追記
実際のwebサイト制作ページです。
最初のものがajax読み込みのもので、二つ目のものが、jquery.bxslider.min.jsです。
jquery.bxslider.min.js読み込みの場合は、スライダー、スクロール両方とも反応し
ないことから読み込んでいないと判断しました。
![イメージ説明](b8f8ee39488f42854c57f31dddd42eb0.png)
![イメージ説明](84ae127d7cbb1a14bfe1085c466fbdae.png)
  • HTML

    13050 questions

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

  • CSS

    8733 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    8979 questions

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

  • Ajax

    1454 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

1 htmlの追加

roronoazoro

roronoazoro score 67

2017/01/01 18:03  投稿

ドキュメントルートに関して
jquery本体の読み込みについて質問です。
バージョンjquery-3.1.1.min.jsを読み込む際にどうしてもエラーが出てしまいます。
前回質問したものと同じで恐縮なんですが、うまくいかないのです。
また、googleフォントの読み込みも同じくうまくいきません。
jqueryの読み込みはajaxだとうまくいきます。
前回質問させていただいた時は、ドキュメントルートなるものが原因で、1階層上がることが読み込まない原因でした。今回は同階層にjsフォルダを置いているにもかかわらず読み込んでくれません。
googleフォントの方も、同じ原因で読み込んでくれないのかなと思っています。
ドキュメントルートを調べてみたもののイマイチ、ピンときておりません。
原因わかる方いましたらよろしくお願いします。
```ここに言語を入力
<!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">
<link rel='stylesheet' href='css/font-awesome.min.css'>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script src='./js/jquery-3.1.1.min.js'></script>
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id='container'>
<!--スライダー-->
<ul class="bxslider">
 <li><img src="img/pict1.jpg" alt=""></li>
 <li><img src="img/pict2.jpg" alt=""></li>
</ul><!--#bxslider-->
</div><!--#container-->
</body>
</html>
 
/*script.jsの中身*/  
/*.bxslider*/  
$(document).ready(function(){  
   $('.bxslider').bxSlider({  
   auto: true,//自動切り替えの有無  
   prevText: '<', //前へのテキスト  
   nextText: '>', //次へのテキスト  
   pause: 5500,  
   speed:800,  
   mode:'fade',  
   });  
});  
 
/*ページスクロールスピード*/  
$(function(){  
// #で始まるアンカーをクリックした場合に処理  
$('a[href^=#]').click(function() {  
// スクロールの速度  
 var speed = 400; // ミリ秒  
// アンカーの値取得  
 var href= $(this).attr("href");  
// 移動先を取得  
 var target = $(href == "#" || href == "" ? 'html' : href);  
// 移動先を数値で取得  
 var position = target.offset().top;  
// スムーススクロール  
$('body,html').animate({scrollTop:position}, speed, 'swing');  
   return false;  
  });  
  });  
```
現在webサイト制作してまして、スライダーとページスクロールに関連した部分のhtmlを省略しております。  
それが原因かとも思ったのですが、省略してないものでも、同じようにエラーとなりました。  
![イメージ説明](8b4e03b3777328b5f11215404c1b1c3c.png)
![イメージ説明](1ec7bf5acc32643c824624179160ea94.png)
![イメージ説明](739840ce011e4af6ca3620906841d643.png)
  • HTML

    13050 questions

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

  • CSS

    8733 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    8979 questions

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

  • Ajax

    1454 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

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