超超初心者向け漫画サイトのつくり方【jQueryを読み込む】

jQueryとは何か。

htmlやCSSに出来ない事をしてくれる賢い人。

色んな知識を蓄えているので、若干挙動が重いですが華のあるホームページにしてくれます。

jQueryを使って漫画サイトに採用したいもの

1、スムーススクロール

ページ内リンクで、瞬間移動せずするするっとエレベーターが動くようにスクロールして目的地に到達するアレです。

2、フェードイン

透明から段々ふわっと画像が表示されるアレです。CSSでも実装可能なので、フェードインのみ採用したいならjQueryは不要。

3、レイジーロード

ページ内画像を表示直前で読み込む。縦スクロールタイプの漫画サイトなら絶対入れておきたいヤツ。

4、スライダー

画像がスライドしていくアレ。トップページの装飾や、ページめくりタイプの漫画にも使える。

……こんなもんかなぁ。

1、2は、jQuery本体と少しの記述で使えます。

3、4は、プラグインを用いて使うのが一般的です。

jQueryを使うには

そもそもjQuery自体にピンと来ないと思いますので、何はともあれ触ってみるのが一番です。

まー、物知りな長老や賢者みたいなモンです。簡単にお願いすると、ちゃちゃーっと魔法で何とかしてくれる人です。

jQueryを使う方法は、2種類あるので環境によって使い分けてください。

◆サーバーの容量に余裕がある人、オフラインで作りたい人

→jQueryを、ダウンロードして使ってください。

◆サーバーの容量が少ない人、オンラインで作ってもいい人

→CDNを使います。WebFTPとかみたいに、Web上にあるjQueryを使わせてもらう方法です。

こだわりがないなら、CDNを使っとけば大丈夫です。

jQueryのダウンロード

↓jQueryのホームページへ行きす。

jQuery
jQuery: The Write Less, Do More, JavaScript Library

トップページの、downloadボタンをクリック

すると、ダウンロードページへ行きます。

赤枠で囲った部分を右クリック

名前を付けて保存をクリック

任意の場所(デスクトップ上とか)に保存

すると

こんなのがダウンロード出来ているはず。

これが、jQuery本体です。

※jquery-3.3.1.jsとなっている人は、重いバージョンのjQueryをダウンロードしちゃってます。超超初心者にとって全くメリットのない代物なので、jquery-3.3.1.min.jsをダウンロードしなおしてください。

jQueryのCDN

CDNは、色んな所が提供してるのですが、こだわりが無いならgoogleが提供しているCDNを使っとけば大丈夫!

情報は、jQueryのホームページに載っています。

ダウンロードページの下のほうにCDNという項目があります。そこのOtherCDNsの下に

googleCDNがあります。クリックすると

なんか色々書いてありますが、一番上の3.xを使います。最新版です。

CDNは、ここに記載されているコードを自分のhtmlに記述すれば使えます。

ダウンロードより手軽ですね。

ついでに、1.xや2.xは、古いブラウザの為や、古いプラグインを使うときにしか使いどころがありません。無視しちゃいましょう。

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でお腹いっぱいですよね。

コピペ、頑張りましょう~

コメント