Web制作

【超便利】jQueryを使い、Webを華やかに!【読み込み方法も解説】

ユウ
ユウ
皆さんこんばんにちは、ユウです。

jQueryについて解説するよ!

私は以前の記事で、Web制作する際に使う言語HTMLとCSSについて、少しだけ紹介しました。

その記事については下のリンクから見られますので、興味がある方はそちらから足を運んでみて下さい。

【理系文系関係ない!】とりあえずHTMLを学ぼう!【プログラミングは楽しい】本記事はHTMLの初歩的な知識についてまとめています。HTMLはマークアップ言語と呼ばれ、プログラミング言語ではないですが、とても需要のある言語です。とても簡単で、文系だからできない…ということは全くありません。文系理系関係ない3つの理由を解説しています。とりあえずHTMLをはじめちゃいましょう。...
CSSはHTMLと一緒に勉強しよう!【外部読み込み・内部埋め込みも解説】CSSとはCascading Style Sheetsの略でスタイルシート言語と言われるものになります。基本的にHTMLとCSSの役割はHTMLが文書の内容、CSSが見た目です。そのCSSの使用方法には外部読み込みと内部埋め込みの2つがあります。どちらも本記事で紹介しています。ぜひ立ち寄ってください。...

Web制作においてHTMLとCSSはかなり大事ですが、それだけでは華やかなサイトは作れません。

ではどうすれば良いのかというと、jQuery という言語を使っていきます。

この言語を使うことで、Webサイトに大きな動きを与え、見るだけでも楽しいような格好いいWebサイトを作ることも可能になっていきます。

皆さんぜひ、今回の記事を通してjQueryを知り今後のWeb制作に役立てて行って下さい。

今回の記事を読むメリット

・jQueryとは何かがわかる

・jQueryの読み込み方法がわかる

jQueryとは

考える人
考える人
jQueryとは一体何なんだ?

jQueryはJavaScriptの数あるライブラリの中で、最も有名なものです。

ライブラリというのは簡単に説明すると、

元の言語(JavaScript)→扱いやすいファイル(jQuery)

と言う感じで、使いやすくしたものです。

ですからjQueryはJavaScriptよりも扱いやすくなっており、JavaScriptで書くと何十行にもなってしまうコードがほんの数行で済んでしまいます。

こういったことからプログラミングを始めたばかりの方でも、扱うことが簡単になっているので、とても重宝されているライブラリになります。

jQueryは何が出来るのか

jQueryについては少しだけ分かったけれど具体的には何が出来るの?と思っている方なんかもいらっしゃると思います。

下にあるのが jQueryで行える事です。これ以外にもかなり出来ることがあるのですが今回はよく使う機能を紹介しています。

・クラスや id を指定してCSSやHTMLを変えることが出来る

・画像をスライドショーのように出来る

・ボタンをクリックするとページ内の指定箇所に飛ばすことが出来る

・画像をA地点からB地点に動かすことでWeb全体をダイナミックに見せることが出来る

など様々な事が出来ます。

【重要】jQueryの読み込み

それでは実際に jQuery を使用する際にやっていくことを紹介していきます。

jQueryはライブラリというファイルなので実際にはHTML内で読み込まなければ動作しません。

CSSのファイルなんかも<link>で読み込んでいるのですがそういった感じです。

jQueryを読み込ませる場合はHTMLの中の<head>内か</body>の直前に置きます。

</body>の直前に入れた方が読み込み速度が速いのでおすすめなのですが、最初の内は<head>内に入れて動作させておいた方が間違いが少なくなります。

ですので、最初のうちは<head>に入れておいた方が良いかと思います。

jQueryを読み込む方法としては2種類あり、以下の通りです。

1. Web上のソースを読み込む

2. ダウンロードしたjQueryを読み込む

1.Web上のソースを読み込む

以下のコードをHTMLに挿入します。

2.ダウンロードした jQuery を読み込む

まず、jQueryライブラリの公式ページからダウンロードをします。

https://jquery.com/download/ (このリンクからダウンロード画面へといけます)

特に古いブラウザに対応させたいとかの希望がなければ、そのままダウンロードしてもらって大丈夫です。

Download the compressed, production jQuery (バージョン)というリンクがあると思うのでそちらからダウンロードします。

ダウンロード場所はファイルの一番上(ルート階層)に持ってくるのがわかりやすいです。

そして、ダウンロードした jQuery をHTMLで読み込めば完了です。

プログラムコードの読み込み

次はコードを書いてく上での書き方を紹介します。

この方法も2種類あり、以下の通りです。

1. HTMLに直接書いていく方法

2. 別ファイルにしてそれを読み込む方法

1.HTMLに直接書いていく方法

2.別ファイルにしてそれを読み込む方法

2の方がよく使われる方法なのですが短い文のみでしたら1の方が良いです。

注意

これらの方法はどちらもjQueryを読み込んでからプログラムを書き込んでいるということに注意して下さい。

プログラミングというものは大体上から順に読み込まれて行きます。

ですから、動作刺せるよりも前にライブラリを読み込んでおいて置かないと迷子になってしまい、プログラムが実行しなくなってしまいます。

最初の内によく起こる間違いなので気をつけてください。

実際にjQueryを動かす

それでは一個だけプログラムを書いて、動作を確認しましょう。

今回はマウスを四角形までに持って行くと、色が変わっていくというプログラムを書いてみました。

See the Pen
jQuery説明
by 悠(人) (@yutohanabusa)
on CodePen.


このようにjQueryはアクションによってその要素のCSSを変えたり出来たりなど様々な事が出来ます。

jQueryのまとめ

jQueryのまとめ

・jQueryとはJavaScriptを使いやすくしたもの(ライブラリ)

・jQueryにはidを変えたり、スライドショーにしたりなど多くの動作が可能

・読み込み方法は2種類あり、上の通り

・jQueryでWebを華やかにできる

最後に

今回はjQueryというライブラリを紹介しました。

jQueryは簡単で意外と直感的に書くことも出来ます。

jQueryをマスターしてバリエーション豊かなWeb制作をやっていってみてはいかがでしょうか!

長くなってしまいましたが、最後まで読んでいただきありがとうございます。

ABOUT ME
ユウ
ユウ
プログラミング担当です。夜行性大学生やってます。 メンバーの中で一番プログラミングが得意で、将来はBMIという研究をしてALSの患者さんへの医療機器の開発を目標にしています。(すごそう) 無線LAN有線LANより便利。