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



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

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

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

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

ポンクソフト

範囲を選択_189

ポンクソフト

  • 運営/ポンクソフト社
  • ボリューム/23ページ
  • モバイル対応

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

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

jQuery入門講座]

範囲を選択_190

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

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

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

W3Schools

範囲を選択_191

W3Schools

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

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

WEB企画LABO

範囲を選択_192

WEB企画LABO

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

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

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

OZPAの表4

OZPAの表4

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

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

ASCLL.jp

範囲を選択_193

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

ASCLL.jp

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

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

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

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

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

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

CodeCamp Code部

CodeCamp Code部

  • 運営/CodeCamp
  • ボリューム/1ページ
  • モバイル対応

CodeCampでは、JavaScript チュートリアルの中でjQueryの使い方を紹介しています。 主にJavaScriptを使った場合とjQueryを使った場合の違いについて紹介しています。 文末の課題をクリア出来たら jQueryマスターですね。

まとめ

多くのjQueryチュートリアル・サイトでは、サンプルコードが紹介されていて、コピペすればjQueryを使えているような気になりますが、実務レベルのデザインに活かそうと思うと自分でコードを考えて編集する必要があります。

中々とっつきにくいモノはありますが、今回紹介したサイトをご覧になって是非がんばってください!

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp