質問: お疲れ様です。下記質問です。 ### 困っていること サムネイル付きのカルーセルを実現したく、jQueryプラグインのslickを使っているのですが、demoサイトのように表示させることができません。 具体的には、ローカルブラウザではCSS, JavaScriptが効かず、 サーバーにあげるとCSSが効いていないように見えます。 ・ローカルで表示させた時 ![ローカル](https://teratail.storage.googleapis.com/uploads/contributed_images/46e4d39bb95a28ddd093fd90f5edba39.png) (ただのリストになっています。) ・サーバー経由で表示させた時 ![サーバー経由](https://teratail.storage.googleapis.com/uploads/contributed_images/5350664c572adfe856956eee1bfe214e.png) (カルーセルにはなっていますが、これではちょっと使えないデザインです) ### 知りたいこと **なぜCSSやJavaScriptがうまく動かないのでしょうか?** また、下記の内容につきましてもアドバイスありましたら教えてください。 1JavaScriptが効いているかどうかはどう判断すれば良いのか? CSSなら開発者ツールで確認できますが、JavaScriptはどう判断すれば良いのでしょうか? 2動作確認はどうやってやるべきか? 今はクロームを立ち上げてそこにhtmlファイルをドラッグ&ドロップして表示させているのですが、今回ローカルでJSが全く効かなかったように、これはあまりよくないやり方なのでしょうか? 本来どうやって動作確認をすべきなのでしょうか? ### 該当のソースコード ``` My Now Amazing Webpage ``` ・フォルダ構成 ![フォルダの構成](https://teratail.storage.googleapis.com/uploads/contributed_images/fb13af86dbf55e33a851c2eb2d61916b.png) ### 補足情報(FW/ツールのバージョンなど) Mac 10.13.4 chrome バージョン: 69.0.3497.100
回答: 質問内容が結局slickのことを聞きたいのか、JavaScriptやCSSが反映されないことを聞きたいのかふわっとしてますが、後者だとして回答します。 > > 1JavaScriptが効いているかどうかはどう判断すれば良いのか? > > CSSなら開発者ツールで確認できるが、JavaScriptはどう判断すれば良いのでしょうか? > > > JavaScriptでもCSSでも開発者ツールで確認できるケースと確認できないケースがありますよ。 CSS: 可→指定したCSSファイルが存在しない、パスが間違っている 不可→指定したStyleが存在しない、スペルが間違っている、そもそも何も指定されていない、利用していない JavaScript: 可→指定したjsファイルが存在しない、パスが間違っている、用意した関数名が間違っている、存在しない、読み込んだjsに何かしら構文エラーなどがある 不可→用意した関数を利用していない、そもそも読み込んだだけで何も実行していないjsファイル いずれもパッと思いついたケースなので他にもあるかもしれませんが、代表的な例です。 > > 2動作確認はどうやってやるべきか? > > > ブラウザにドロップしようが、ローカルサーバー立てようが、Webサーバーにアップしようが考え方はかわりません。 「とりあえず正しく読み込まれているか確認したい」のであれば CSSファイルであれば「全体に対する指定」を大げさな数値で入れてみる 例: ``` *{ font-size:100px; } body{ background-color:#f00; } ``` jsファイルであれば冒頭にconsole.log()を入れてみる 例; ``` console.log("test"); //問題切り分けならファイル名とかのほうがいいかもしれない ``` 自身が作ったファイルでなく、外部ファイルをそのまま利用する場合は、CDNを利用する。 (ライブラリなど自身で何も変更を加えない場合、これが確実) * jQuery CDN * Google Hosted Libraries いずれにしても、GoogleChromeであれば「ソースを表示」から外部ファイル(外部サイトだけでなく自身のhtml以外のファイル)はリンクになっているので、そのリンクをクリックしたときに辿れるかどうかを確認すれば「ファイルパスが合っているか」確認ができます。 まあ、リンクが正しくなければ開発ツールのコンソールにエラーが出ているのでそこから確認するのが良いですけど。 いずれにしても外部ファイルにした場合の原因は、スペルミスやアクセス環境も含めてパスが正しくないことがほとんどなので(ファイルの中身が正しい前提)、そこを工夫するしかないのではないでしょうか。 jQuery使っている場合は、使っているプラグインが対応していないjQueryのバージョンを利用しているとかないわけではないですけど、 この提示内容だけではそこまで判断できません。slickのバージョンまで提示されているわけではないですからね。 slickに限る話であればslickもcdn提供しているのでそちらを利用するのが確実では?