** 自己紹介 **
今年の4月にプログラミングを始め、現在はruby on rails,react.jsを学習し始めた大学生。4月、5月はプログラミングに自分の時間を費やし、自分のHPを作成する。その際にプログラミング初心者がjqueryを使用する際に、ハードルが低そうに見えて、意外と詰まったりしていたので、そこを書いていこうと思います。
###重要:これはjavascriptの知識がほとんどない人に向けた記事です。(もちろんjqueryも)
通常のググりだとjqueryでできることの1部しか見ることができない
多分、みなさんがjqueryで何か作ろうと思ったとき、アニメーションの名前をテキトーに打ち込んでして検索していませんか?
ex: 『jquery アニメーション フェードイン 方法』や
『jquery アニメーション スクロールしてから表示 方法』など
このように検索していませんか?
実際わたしもそう検索していました。こういった検索をしたとき、大抵、jsの記述コードが貼ってあってできますよ! みたいなサイトが出て来ます。でもそれって本当にjqueryでできるサンプルの一部が乗っているだけなんです。
もっと色々なのみて、自分の制作物にあうものを厳選したくないですか? サンプルを自分らしく改良したくありませんか?
サンプルサイトではうまくコピペしたはずなのにうまく動かない!!なんてこともあります。そんなときに考えられる原因を考えてみましょう。
サンプルサイトにおいて稀に起きる問題の対処法
そういったサイトの通りやってもうまくいかない時があったときの対処法を教えます。
** まずは実際に動いたサンプルのページのソースを見てみましょう。**
ページで書かれていることを違うところがあるとおもいます。 そういったところをとにかく見比べて、コピペして...リロードして...の確認になります。(地道にこれをやるのが意外と一番簡単に解決する方法だったりします。)
その他にも様々なミスの原因があるので書いて行きますね。
・そもそもしっかりjqueryがダウンロードされているか
・バージョンがしっかりと合っているか
・jqueryのコードを書く場所が間違っていないか
(headの中に書こう!)
・scriptの記述があてられるコードよりも前に記述されていないか
(基本的にbodyの最後にまとめて書いた方がみやすいよ!)
でも結局はそんなめんどくさいのに振り回されずに楽に色々なアニメーション取り入れたい!と思う方もいるかと思います。
↓
↓
そんなときに使うのが〇〇.js もしくはそういったものをまとめて乗っけているサイト
実は適当に 『jquery サンプル』みたいにググるよりよっぽどわかりやすく、かつ、様々なバリエーションのものが存在します。
一応、参考になるサイトをいくつか乗っけておきますね
http://getbootstrap.com/
https://daneden.github.io/animate.css/
http://gimmicklog.main.jp/jquery/
gimmicklogは似たような記事が一覧になっているのでぜひチェックしてみてください。
どれも説明がしっかり書かれていてわかりやすいです。
(添付させて頂いたurl先の方にに感謝の思いを込めて)