更新日: 2017年03月31日
公開日: 2016年10月12日

jQueryの学習ができるチュートリアル・サイト8選

Web デザイナーやフロントエンジニアにとって欠かすことのできない jQuery。まだ jQuery を使ったことのない方、もしくは一度試したがうまくいかなかった方、分かりやすいチュートリアル・サイトがありましたのでご紹介させて頂きます。

これでOK！ jQueryの学習ができるチュートリアル・サイト 8選
ポンクソフト
jQuery入門講座]
W3Schools
WEB企画LABO
OZPAの表4
[ASCLL.jp](http://ascii.jp/elem/000/000/498/498710/)
【プラグインの使い方】無駄と文化より
CodeCamp Code部
まとめ

これでOK！ jQueryの学習ができるチュートリアル・サイト 8選

ポンクソフト

運営／ポンクソフト社
ボリューム／２３ページ
モバイル対応

多くのチュートリアル・サイトが一つずつコードを説明していくのに対して、こちらのサイトではまずjQueryが使われている Webページのhtmlファイルを示し、その中でどういう風にjQueryが機能しているかを解説しています。 Webページの全体像を把握する中でjQueryを学習できるので、jQuery初心者でも使い方をイメージしやすい構成となっています。

またjQueryを使ったゲームや機能のサンプルが、15種類以上紹介されており、このサイト自体**にもjQueryが活用されていて、画面上の実行結果欄に jQuery テクニックが使われています。

jQuery入門講座]

運営／デザインドリル社
ボリューム／63ページ
PCレイアウト

デザインドリル社のブログで紹介されていたjQuery記事* を、分かりやすくまとめたサイトになります。

使い方、サンプル、プラグイン、リファレンス、使用例の５つのカテゴリーに分けて、 jQueryの情報を紹介しています。 2011年頃の情報が多いですが、 jQueryの基礎を身につける上では問題ない内容です。 jQueryの基本からプラグインといった応用部分まで紹介されています。

W3Schools

運営／W3Schools社
ボリューム／32ページ
モバイル対応

チュートリアルで有名なW3SchoolからもjQueryが紹介されています。 jQueryの基礎から効果、コーディングを、サンプルコード＆オンライン・エディタを交えながら学習していくことができます。プラグインの学習はありませんが、 AJAXの使い方が紹介されています。

WEB企画LABO

運営／WEB企画社
ボリューム／1ページ
モバイル対応

東京・名古屋でWeb制作を行っているWeb企画者がまとめているjQueryレッスンサイトです。

jQueryの基礎から実践編までをオンライン・コーディングの CODEPEN を使って紹介しています。 CSSに慣れていない方でも分かりやすいように、 jQueryでエフェクトを与えるCSS要素について、一つ一つ細かく説明してくれています。サンプルでは、基本的な jQuery機能が 6つ紹介されています。

OZPAの表4

運営／OZPAさん
ボリューム／1ページ
モバイル対応

東京在住のWeb＆グラフィックデザイナー＆先日DeNA社に転職したOZPAさんが運営するブログサイトになります。他のチュートリアルサイトに比べるとブログ形式のため読みやすく、物語的にjQueryを学習していくことができます。超初心者向け、とタイトルにあるようにJavaScriptに慣れていない方でも理解できるように画像とコードを使って丁寧に説明してくれています。サンプルは7つ紹介されていて、そのコード一式はページの最下部でダウンロードすることができます。

ASCLL.jp

運営／ASCLL.jp 社
ボリューム／6ページ
モバイル対応

ASCLL.jp

jQuery ・・・また今度、ではなく今すぐにjQueryをやってしまおう！という企画でまとめ上げられたjQueryチュートリアルになります。

45分で一通りの学習ができるように簡潔・明瞭にまとめ上げられています。 Jqueryの機能もリスト形式でひと目で分かるようにまとめてくれていますので、初期学習だけでなくメモページとしても長く利用できます。サンプルは5つ紹介されていて、使用されているコードについてはサンプルファイルを開いて、ページのソースを表示してみると分かりやすいと思います。

【プラグインの使い方】無駄と文化より

運営／今日の三井君さま - ボリューム／1ページ
モバイル対応

jQueryの基本的な使い方がわかったら、より実用的な動きを表現できるプラグインを使ってみたいですよね。こちらのブログにjQueryのプラグインの使い方、コーディングの仕方などが詳しく書かれていましたのでご紹介させて頂きます。 jQueryプラグイン初心者ではわかりにくいHTMLとJavaScriptとjQueryとCSSの関係が分かりやすく紹介されています。