動くWebデザイン
アイディア帳

サンプルコードを利用したのに動かない！という時は、下記のチェック項目をご確認ください。

※デバッグの際に出た受講生さんの声や、初心者の方が陥りやすいミスを集めています。
「間違えて動かなかったけど、こうしたら動いた！」という解決方法の共有や「このコードの組み合わせだと動かなかった」という問題報告がございましたら、ぜひお問い合わせフォームから声をお寄せください。

コードの読み込みに関するミス編

• jQueryライブラリを読み込んでいますか？
• バージョンや種類の違うjQueryを2つ以上読み込んでいませんか？
• プラグインを利用する場合、プラグインが指定するCSSやJSをHTML内に記述していますか？
• jQueryに依存するプラグインを使用している場合、HTML内のJSを読み込む順番が
  ①jQuery
  ②プラグイン
  ③自作のJS
  の順番になっていますか？
• jQueryに依存するプラグインを2つ以上使用している場合、依存しているjQueryのバージョンがそれぞれ違っていませんか？

コードの記述に関するミス編

• HTML、CSS、JSのコードのどこかに全角スペースが入っていませんか？
• ()や{}といった記号が全角になっていませんか？
• HTML、CSS、JSのタグの閉じ忘れはありませんか？
• HTML、CSS、JSのコードのスペルミスはありませんか？
• jQueryのコードにある{}や、有効化しなければいけないコードをコメント化していませんか？
• 2つの異なる動作に、同じクラス名や定義名を指定していませんか？
  (例）ランダムにブロックを表示させるクラス名とランダムにテキストを表示させるクラス名が同じ。
• ::after ::before と言った疑似要素をJSで動かそうとしていませんか？
  ※疑似要素はJSでイベントが取れず動かないことがあります。
• WordPressのJQueryを利用している場合、自作のJSの書き方が$マークからはじまっていませんか？⇒解決方法

コードのバッティングに関する不具合編

• jQueryで同じ動きのきっかけとなる記述同士がバッティングしていませんか？
  （例）スクロールをしたら●●する、クリックをしたら●●するといった記述同士のバッティング
• 同じ種類の動きのプラグインが2つ以上読み込まれている場合、プラグイン同士がバッティングしていませんか？
  （例）ギャラリー系のプラグインを2つ入れたら動かなくなった。スクロールに連動するプラグインを2つ入れたら動かなくなった。
• WordPressを使用している場合、WordPress独自のjQueryと自分が読み込んだjQueryがバッティングしていませんか？
• 動かす前後のCSSのtransformがバッティングしていませんか？
  （例）はじめから傾斜がついているものを、JSを使い「スクロールをしたらクラス名を付与してCSSを追加」し、ふわっと表示させようとしたら動かなかった。⇒CSSのtransform同士のバッティング
• 自分で書いたCSSのclass名やid名とサンプルコードのclass名、id名がバッティングしていませんか？