jQueryとは何か。
htmlやCSSに出来ない事をしてくれる賢い人。
色んな知識を蓄えているので、若干挙動が重いですが華のあるホームページにしてくれます。
jQueryを使って漫画サイトに採用したいもの
１、スムーススクロール
ページ内リンクで、瞬間移動せずするするっとエレベーターが動くようにスクロールして目的地に到達するアレです。
２、フェードイン
透明から段々ふわっと画像が表示されるアレです。CSSでも実装可能なので、フェードインのみ採用したいならjQueryは不要。
３、レイジーロード
ページ内画像を表示直前で読み込む。縦スクロールタイプの漫画サイトなら絶対入れておきたいヤツ。
４、スライダー
画像がスライドしていくアレ。トップページの装飾や、ページめくりタイプの漫画にも使える。
……こんなもんかなぁ。
１、２は、jQuery本体と少しの記述で使えます。
３、４は、プラグインを用いて使うのが一般的です。
jQueryを使うには
そもそもjQuery自体にピンと来ないと思いますので、何はともあれ触ってみるのが一番です。
まー、物知りな長老や賢者みたいなモンです。簡単にお願いすると、ちゃちゃーっと魔法で何とかしてくれる人です。
jQueryを使う方法は、２種類あるので環境によって使い分けてください。
◆サーバーの容量に余裕がある人、オフラインで作りたい人
→jQueryを、ダウンロードして使ってください。
◆サーバーの容量が少ない人、オンラインで作ってもいい人
→CDNを使います。WebFTPとかみたいに、Web上にあるjQueryを使わせてもらう方法です。
こだわりがないなら、CDNを使っとけば大丈夫です。
jQueryのダウンロード
↓jQueryのホームページへ行きす。
トップページの、downloadボタンをクリック
すると、ダウンロードページへ行きます。
赤枠で囲った部分を右クリック
名前を付けて保存をクリック
任意の場所（デスクトップ上とか）に保存
すると
こんなのがダウンロード出来ているはず。
これが、jQuery本体です。
※jquery-3.3.1.jsとなっている人は、重いバージョンのjQueryをダウンロードしちゃってます。超超初心者にとって全くメリットのない代物なので、jquery-3.3.1.min.jsをダウンロードしなおしてください。
jQueryのCDN
CDNは、色んな所が提供してるのですが、こだわりが無いならgoogleが提供しているCDNを使っとけば大丈夫！
情報は、jQueryのホームページに載っています。
ダウンロードページの下のほうにCDNという項目があります。そこのOtherCDNｓの下に
googleCDNがあります。クリックすると
なんか色々書いてありますが、一番上の3.ｘを使います。最新版です。
CDNは、ここに記載されているコードを自分のhtmlに記述すれば使えます。
ダウンロードより手軽ですね。
ついでに、1.ｘや2.ｘは、古いブラウザの為や、古いプラグインを使うときにしか使いどころがありません。無視しちゃいましょう。
jQueryを読み込む
自分の作ったhtmlに、jQueryを読み込んでjQueryを使う準備をします。
◆ダウンロードの場合
index.htmlと同じ階層にjQuery本体があるとして、index.htmlでjQueryを使いたい場合
↓こういう構成
index.htmlをテキストエディタ（サクラエディタ）で開いて、
＜head＞～＜/head＞の間に
<script src="jquery-3.3.1.min.js"></script>
これで読み込み完了です。
◆CDNの場合
同じく、＜head＞～＜/head＞の間に
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
これで読み込み完了です。
まとめ
この記事を書いている時の最新版が、jquery-3.3.1なだけで、この数字部分はどんどん新しくなっていきます。
数字部分が違っていても、同じjQueryなので大丈夫です。
今回は、jQueryを使う準備をした＝賢者を呼んだ。だけです。
効果を発揮するには、賢者（jQuery）にお願いする記述をしなければいけません。
htmlやCSSと、また違う記述方法になります。が、大丈夫。
jQueryはコピペで結構ちゃんと動いてくれます。
記述方法を覚えるに越したことはないのですが、htmlとCSSでお腹いっぱいですよね。
コピペ、頑張りましょう～
コメント