【JS, CSS】JavaScript, CSSがうまく反映されないのは？

お疲れ様です。下記質問です。

困っていること

サムネイル付きのカルーセルを実現したく、jQueryプラグインのslickを使っているのですが、demoサイトのように表示させることができません。
具体的には、ローカルブラウザではCSS, JavaScriptが効かず、
サーバーにあげるとCSSが効いていないように見えます。

・ローカルで表示させた時

（ただのリストになっています。）

・サーバー経由で表示させた時

（カルーセルにはなっていますが、これではちょっと使えないデザインです）

知りたいこと

なぜCSSやJavaScriptがうまく動かないのでしょうか？

また、下記の内容につきましてもアドバイスありましたら教えてください。

①JavaScriptが効いているかどうかはどう判断すれば良いのか？
CSSなら開発者ツールで確認できますが、JavaScriptはどう判断すれば良いのでしょうか？

②動作確認はどうやってやるべきか？
今はクロームを立ち上げてそこにhtmlファイルをドラッグ&ドロップして表示させているのですが、今回ローカルでJSが全く効かなかったように、これはあまりよくないやり方なのでしょうか？本来どうやって動作確認をすべきなのでしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5  <title>My Now Amazing Webpage</title>
6  
7  <link rel="stylesheet" type="text/css" href="/slick/slick-theme.css">
8  <link rel="stylesheet" type="text/css" href="/slick/slick.css">
9
10  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
11  <script src="/slick/slick.min.js"></script>
12
13  <script type="text/javascript">
14    $(function() {
15         $('.thumb-item').slick({
16              infinite: true,
17              dots:false,
18              dotsClass: 'slick-dots',
19              slidesToShow: 1,
20              slidesToScroll: 1,
21              centerPadding:'200px',
22              arrows: true,
23              autoplay: false,
24              accessibility: true,
25              centerMode: true,
26              fade: true,
27              asNavFor: '.thumb-item-nav' //サムネイルのクラス名
28         });
29         
30         $('.thumb-item-nav').slick({
31              infinite: true,
32              slidesToShow: 2,
33              slidesToScroll: 1,
34              asNavFor: '.thumb-item', //スライダー本体のクラス名
35              focusOnSelect: true,
36         });
37    });
38  </script>
39
40  </head>
41  <body>
42    <!-- ↓スライダー本体 -->
43      <div style="width:600px;">
44        <ul class="thumb-item">
45          <!--画像urlは適宜変更-->
46          <li><a href="#"><img src="home_img.jpg"></a></li> 
47          <li><a href="#"><img src="home_img.jpg"></a></li>
48        </ul>
49    <!-- ↓サムネイル -->
50        <ul class="thumb-item-nav">
51          <li><a href="#"><img src="home_img.jpg" width="50%" height="50%"></a></li>
52          <li><a href="#"><img src="home_img.jpg" width="50%" height="50%"></a></li>
53        </ul>
54      </div>
55  </body>
56</html>
57

・フォルダ構成

補足情報（FW/ツールのバージョンなど）

Mac 10.13.4
chrome バージョン: 69.0.3497.100

m.ts10806

2018/10/18 18:52

タイトルと要件が合ってません。ご調整ください

退会済みユーザー

2018/10/19 11:28

軽く調整しました。よろしくおねがいします。。

m.ts10806

2018/10/19 19:29

そうですか…。あまりこのような技術専用のサイトで煽り文句は好まれない傾向にあるのでそこも考慮いただきたかったですが、仕方ないですね

退会済みユーザー

2018/10/19 21:21

はい！そこは仕方がないです！

m.ts10806

2018/10/19 21:27

「今後避けられる可能性が高くなっても仕方ないですね」という意味だったんですけどね。伝わらなくて残念です。clome とかスペルミスそのままにしてるところもあるし、あまり適当にしないほうが良いです。

退会済みユーザー

2018/10/19 22:01

今後避けられるかという点について言えば煽りタイトルの方が回答が多いと感じてるので特に問題に思っていません。以前はもう少し普通ののタイトルにしていましたが、どっちかというと煽る方がビュー貰えます。伝わった上での判断だとご理解ください。teratailの投稿ルールに煽りは厳禁的なことが書いてあるならやめますが、特にそうでなければ僕にどう投稿すべきとかを伝えるのではなく運営にルールを変えるよう掛け合ってもらえればいいかと思います。（そういうルールがあるかは僕の方でも確認してみますね）。chromeしくじってるところは恥ずかしいんで後で直します。最後に、指摘いただけるのは本当にありがたいんですが、もう少しはっきり言っていただけるとシンプルなコミュニケーションが取れたと思います。今回は自分自身すみまでルールを熟読できてはなかったですし、若干面倒なやりとりをすることでルールちゃんと読もうと気付かされたのでそこも本当にありがたいです。回答者さんの意図も面倒な人を演じることでteratailの治安を良くしようとしているのであれば頭の下がる想いです。ただ、現実で出会ったことのない類の面倒くさいコミュニケーション方法で不愉快です。投稿ルール、読み直してみます。どうもありがとうございました！！

m.ts10806

2018/10/19 22:28

ビューがあるのはどこかで「こいつ(悪い意味で)ヤバイ」と晒されてるとかあるんじゃないですかね。実際にビュー数が回答につながった例はごく稀です。タイトルから質問の質の低さが伺えれば、それは回答者にとって「めんどうな質問者」という印象を与えて、見るものの回答を控えるケースが多いですね。「タイトルには要件を書きましょう」と「質問するときのヒント」に書かれていますが、変に煽りを入れるより要件を充実させることに文字数を割り当てた方が見てる人にやりたいことが伝わりますよ。伝われば回答も得やすくなります。「ビューを増やしたい」は質問者さんだけの観点です。他人の時間を使うことを選んだ以上はその他人に如何に要件を淡々と伝えるかを考えてみてください。

think49

2018/10/20 02:15

煽り文句で対抗心を燃やした回答者を釣る戦略ですかね。自分の利益の為には他人の気持ちを煽っても良いと思う(あるいは、ほくそ笑む)、他人の気持ちに鈍感な質問者なのだと思います。こういう質問に回答が寄せられる事が質問者の目論見なので、mts10806さんのとても丁寧な回答は完全に逆効果だと私は思います。

think49

2018/10/20 02:20

ちなみに、煽り文句付きの質問は回答者を選別します。嫌いな人は絶対に回答しません。「煽り文句付きの回答」や「面倒くさい指摘」をされても仕方ないですね。

行動規範の内容に同意します

回答2件

ベストアンサー

質問内容が結局slickのことを聞きたいのか、JavaScriptやCSSが反映されないことを聞きたいのかふわっとしてますが、後者だとして回答します。

①JavaScriptが効いているかどうかはどう判断すれば良いのか？

CSSなら開発者ツールで確認できるが、JavaScriptはどう判断すれば良いのでしょうか？

JavaScriptでもCSSでも開発者ツールで確認できるケースと確認できないケースがありますよ。
CSS：
可→指定したCSSファイルが存在しない、パスが間違っている
不可→指定したStyleが存在しない、スペルが間違っている、そもそも何も指定されていない、利用していない

JavaScript：
可→指定したjsファイルが存在しない、パスが間違っている、用意した関数名が間違っている、存在しない、読み込んだjsに何かしら構文エラーなどがある
不可→用意した関数を利用していない、そもそも読み込んだだけで何も実行していないjsファイル

いずれもパッと思いついたケースなので他にもあるかもしれませんが、代表的な例です。

②動作確認はどうやってやるべきか？

ブラウザにドロップしようが、ローカルサーバー立てようが、Webサーバーにアップしようが考え方はかわりません。
「とりあえず正しく読み込まれているか確認したい」のであれば
CSSファイルであれば「全体に対する指定」を大げさな数値で入れてみる
例：

css
1*{
2  font-size:100px;
3}
4body{
5  background-color:#f00;
6}

jsファイルであれば冒頭にconsole.log()を入れてみる
例；

js
1console.log("test"); //問題切り分けならファイル名とかのほうがいいかもしれない

自身が作ったファイルでなく、外部ファイルをそのまま利用する場合は、CDNを利用する。
（ライブラリなど自身で何も変更を加えない場合、これが確実）

いずれにしても、GoogleChromeであれば「ソースを表示」から外部ファイル（外部サイトだけでなく自身のhtml以外のファイル）はリンクになっているので、そのリンクをクリックしたときに辿れるかどうかを確認すれば「ファイルパスが合っているか」確認ができます。
まあ、リンクが正しくなければ開発ツールのコンソールにエラーが出ているのでそこから確認するのが良いですけど。

いずれにしても外部ファイルにした場合の原因は、スペルミスやアクセス環境も含めてパスが正しくないことがほとんどなので（ファイルの中身が正しい前提）、そこを工夫するしかないのではないでしょうか。
jQuery使っている場合は、使っているプラグインが対応していないjQueryのバージョンを利用しているとかないわけではないですけど、
この提示内容だけではそこまで判断できません。slickのバージョンまで提示されているわけではないですからね。

slickに限る話であればslickもcdn提供しているのでそちらを利用するのが確実では？

投稿2018/10/19 23:22

m.ts10806

総合スコア80888

退会済みユーザー

2018/10/21 01:36

とても丁寧にありがとうございます！ CSSやJSが効いているのか分からない、というのはずっと地味に困っていたんですが、今後は「ソースを表示」で解決できそうです。これで意図したファイルが読み込まれていると分かれば、色々ファイルの内容をいじって考えることもできそうです。それでもだめなら、今度はslickに絞って再度質問してみようと思います。次回以降は何が聞きたいのか分かるようなタイトルにします！どうもありがとうございました。

m.ts10806

2018/10/21 01:44

解決後も編集はできるので記憶があるうちに直すのが良いとは思いますけどね。解決したようで何よりです。

行動規範の内容に同意します

あるあるです。
//ajax
を
https://ajax
にすれば動きます。

投稿2018/10/18 17:04

cheche0830

総合スコア187

cheche0830

2018/10/18 17:05

あとslickも相対パスにする必要があります。 /slick/ではなく slick/です。

cheche0830

2018/10/18 17:09

そのままのパスで確認したい場合はmampやzampといったローカルサーバーソフト等を入れて確認するのがいいと思います。

m.ts10806

2018/10/18 19:08 編集

細かいですがxamppですよ

退会済みユーザー

2018/10/19 11:40 編集

ありがとうございます！！相対パスで始めたい時は/をつけずに行うんですね。全然知らなかったです、ありがとうございます。 MAMPは持ってます。「そのままのパスで確認〜」というのは、MAMPにこれらのファイルを入れたあと、MAMP配下の``htdocs``フォルダをルートディレクトリとして絶対指定せよということでしょうか？（やってみてるのですが、なんだかJSもCSSも効いてくれないみたいです。なんか基本的なところでこけてる気がします。。）

colling

2018/10/19 14:24

上から２番目のイメージで、大きな家の下にドットが出ているということは、CSSもjavascriptも効いてるんじゃないでしょうか？

退会済みユーザー

2018/10/19 21:20

2番目（サーバーにあげたとき）は少なくともJSはきいてます。 CSSについてはデモだともう少しいい感じに（サムネイルが横並びになったり）表示されるんですが、実はデモも別途CSSあててるだけでslickはこんなもんだったりするんでしょうか？

miyabi-sun

2018/10/19 23:00

回答本文は、なぜ「//ajax」では動作せずに「https://ajax」では動くと書いたのですか？

s8_chu

2018/10/20 00:38 編集

横から失礼します。 miyabi-sun さん> 1. 読み込むファイルの URI が「//」で始まる場合、ブラウザは、現在閲覧している文書と同じスキームを使い、そのファイルを読み込もうとします( https://tools.ietf.org/html/rfc3986#section-4.2 )。もし、「file://」というスキームで文書を閲覧しているならば、「//ajax...」というURIは「http://ajax...」ではなく「file://ajax...」となります。すると、ブラウザは Google にホストされた CDN 上の`jquery.min.js`ファイルではなく、ローカル上の `jquery.min.js` ファイルを読み込もうとします。当然、ローカルには読み込もうとしているファイルが存在しないため、ブラウザは `jquery.min.js`の読み込みに失敗します。 2. 質問文には、 > 今はクロームを立ち上げてそこにhtmlファイルをドラッグ&ドロップして表示させていると書かれているため、ローカルでの動作確認時は「file://」というスキームで文書を閲覧していることがわかります。上記1, 2より、ローカルで JavaScript が正常に動作しない問題は、回答文に記述されたとおりの方法で解決すると思います。

miyabi-sun

2018/10/20 01:37 編集

>s8_chuさんありがとうございます。 network-path referenceで記述した場合、 Webサイト上ではhttpとhttpsを使い分けてるみたいなので、どうもURIの仕様の管轄外らしく具体的にどういう挙動になっているのかも知りたかったですね。ですが、基本的にスキーマ名を省略した場合、同じスキーマを利用するのでこの挙動になっているという説明に納得しました。

s8_chu

2018/10/20 04:36 編集

miyabi-sun さん> 返信ありがとうございます。 > Webサイト上ではhttpとhttpsを使い分けてるみたいなので、どうもURIの仕様の管轄外らしく具体的にどういう挙動になっているのかも知りたかったですね。ネットワークパス参照ではどのようにスキームを決定するのか、ということであれば、RFC7230にそれっぽい手順が載っているので、ブラウザも恐らく同じような実装なのでは（詳しくないのでわからないですが）。 https://tools.ietf.org/html/rfc7230#section-5.5 > If the server's configuration (or outbound gateway) provides a fixed URI scheme, that scheme is used for the effective request URI. Otherwise, if the request is received over a TLS-secured TCP connection, the effective request URI's scheme is "https"; if not, the scheme is "http".

think49

2018/10/20 03:04 編集

ブラウザの動きという意味では URL Standard を参照する事になるのであろうと思います(動きは「4.4. URL parsing」を解読する必要があるようです) https://url.spec.whatwg.org/#scheme-relative-special-url-string "network-path" の文言はRFC3986まではあります。 https://tools.ietf.org/html/rfc3986#section-4.2 ところで、 To: @miyabi-sun さん > URIの仕様の管轄外 URI仕様とは、どの仕様を指すのでしょうか。

行動規範の内容に同意します

あなたの回答