質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,982
退会済みユーザー

退会済みユーザー

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

 困っていること

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

・ローカルで表示させた時
ローカル
(ただのリストになっています。)

・サーバー経由で表示させた時
サーバー経由
(カルーセルにはなっていますが、これではちょっと使えないデザインです)

 知りたいこと

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

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

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

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

 該当のソースコード

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>My Now Amazing Webpage</title>

  <link rel="stylesheet" type="text/css" href="/slick/slick-theme.css">
  <link rel="stylesheet" type="text/css" href="/slick/slick.css">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="/slick/slick.min.js"></script>

  <script type="text/javascript">
    $(function() {
         $('.thumb-item').slick({
              infinite: true,
              dots:false,
              dotsClass: 'slick-dots',
              slidesToShow: 1,
              slidesToScroll: 1,
              centerPadding:'200px',
              arrows: true,
              autoplay: false,
              accessibility: true,
              centerMode: true,
              fade: true,
              asNavFor: '.thumb-item-nav' //サムネイルのクラス名
         });

         $('.thumb-item-nav').slick({
              infinite: true,
              slidesToShow: 2,
              slidesToScroll: 1,
              asNavFor: '.thumb-item', //スライダー本体のクラス名
              focusOnSelect: true,
         });
    });
  </script>

  </head>
  <body>
    <!-- ↓スライダー本体 -->
      <div style="width:600px;">
        <ul class="thumb-item">
          <!--画像urlは適宜変更-->
          <li><a href="#"><img src="home_img.jpg"></a></li> 
          <li><a href="#"><img src="home_img.jpg"></a></li>
        </ul>
    <!-- ↓サムネイル -->
        <ul class="thumb-item-nav">
          <li><a href="#"><img src="home_img.jpg" width="50%" height="50%"></a></li>
          <li><a href="#"><img src="home_img.jpg" width="50%" height="50%"></a></li>
        </ul>
      </div>
  </body>
</html>

・フォルダ構成
フォルダの構成

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

Mac 10.13.4
chrome バージョン: 69.0.3497.100

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/10/20 07:28

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

    キャンセル

  • think49

    2018/10/20 11:15

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

    キャンセル

  • think49

    2018/10/20 11:20

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

    キャンセル

回答 2

checkベストアンサー

+1

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

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

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

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

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

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

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

*{
  font-size:100px;
}
body{
  background-color:#f00;
}


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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/21 10:36

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

    キャンセル

  • 2018/10/21 10:44

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

    キャンセル

0

あるあるです。
//ajax

https://ajax
にすれば動きます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/20 10:37 編集

    >s8_chuさん
    ありがとうございます。

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

    キャンセル

  • 2018/10/20 11:17 編集

    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".

    キャンセル

  • 2018/10/20 12:03 編集

    ブラウザの動きという意味では 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仕様とは、どの仕様を指すのでしょうか。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る