こんにちは、ゆんつです。
Webサイトを作るにはHTMLとCSSが必要になります。
そのHTMLとCSSで作ったWebサイトに、HTMLやCSSだけでは実現出来ないような動きを付けたり色々な仕掛けをするためには「jQuery」が良く使われています。
jQueryは「JavaScript」を簡単に扱えるようにしたもので、僕のようなプログラミングの初心者でも少し勉強するだけで、数行のコードを書くだけで動きのあるページを実現することが出来て便利です。
例えば、以下のボタンを押すことで起きる仕掛けもjQueryで作ることができます。
See the Pen
jquery by konpure (@yuntu)
on CodePen.
今日は
について書きたいと思います。
jQueryの導入方法
jQueryの導入方法は
- 外部からファイルを読み込む方法
- jQueryのファイルをダウンロードし、そのファイルを読み込む方法
の2種類の方法があります。
外部からファイルを読み込む方法
とても手軽で簡単な方法です。
headタグの中、又は</body>タグの直前に、以下のコードを貼り付けるだけです。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
たった、これだけでjQueryの導入は完了です。
例）head要素内に書く場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>
例）</body>の直前に書く場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JQuery</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
ファイルをダウンロードしなくても、URLをHTMLにコピペするだけで外部からjQueryが読み込まれてすぐに使い始めることができます。
ちなみに、jQueryを利用するためのURLは以下のリンク先で確認できます。
とても手軽に導入できますが、外部から読み込んでいるため
オフラインの状態ではjQueryが機能しません！
jQueryのファイルをダウンロードしてそのファイルを読み込む方法
jQueryの公式サイトのダウンロードページに行きます。
すると「Download the compressed, production jQuery 3.6.0」というリンクがあります（※3.6.0という部分はバージョンアップにより数字が変わることがあります）。
そのリンクを右クリックして出てきたメニューから「名前をつけてリンク先を保存」を選択し、jQueryファイルを任意の場所にダウンロードします。
後は、外部のファイルを読み込むときと同様に、head要素内か</body>タグの手前でscriptタグの中でダウンロードしたjQueryのファイルを読み込んであげれば完了です。
<script src="jQueryファイルへのパス"></script>
外部から読み込むよりも導入にひと手間多くかかりますが、オフラインでもjQueryを利用することが出来ます
jQueryが読み込まれているかどうかのチェック
jQueryの導入は終わったものの、きちんとjQueryファイルが読み込まれているか不安な場合は、次の方法でjQueryが読み込まれているかどうかを確認することが出来ます。
Chromeを使っている場合
キーボードのF12をクリックして開発者ツールを開き「Source」をクリック。
jQueryが読み込まれている場合には、ツリーの一覧に読み込まれているjQueryが表示されます。
外部から読み込んでいる場合
「ajax.googleapis.com」に読み込まれているjQueryが表示されているはずです。
ダウンロードしたjQueryを読み込んでいる場合
jQueryを設置した場所に、読み込まれているjQueryファイルが表示されるはずです。
FireFoxを使っている場合
キーボードのF12をクリックして開発者ツールを開き「デバッガ―」を選択。
jQueryが読み込まれている場合には、ツリーの一覧に読み込まれているjQueryが表示されます。
外部から読み込んでいる場合
「ajax.googleapis.com」に読み込まれているjQueryが表示されているはずです。
ダウンロードしたjQueryを読み込んでいる場合
jQueryを設置した場所に、読み込まれているjQueryファイルが表示されるはずです。
用途に合わせて使い分けてください
以上のように、jQueryの導入には
・外部からファイルを読み込む方法（オフラインではjQueryが機能しない）
・jQueryのファイルをダウンロードし、そのファイルを読み込む方法（オフラインでもjQueryが機能する）
の2の方法があります。
ご自身の都合に合う方法で、jQueryを導入して使ってください。
それでは、またー。
コメント