jQuery実装ガイド

01「jQuery基本解説+リファレンス」

jQueryの特徴と設置方法：jQueryの基本的な効果と導入の仕方
jQuery初心者向け講座：CSSを理解できている人のためのjQueryポイント解説
はじめてのjQuery：スライドでわかりやすくjQueryの基本的な使い方を解説
初心者向けの基礎を学べるサイト6つ：ソースコードでのシンプルな解説
jQueryでイモムシを作ってみる：myベストイモムシを作ってjQueryを覚えよう
jQueryとはーWebデザイナーから見た魅力：書籍「jQueryデザイン入門」の導入ページ
40分で覚える!jQuery速習講座：要点をギュッと絞って手を動かしながら覚える解説
ポンクソフト：jQuery入門：ゲームを作りながらステップアップ
jQuery入門：順を追ったムダのない解説でスタンダードな教科書サイト
[[jquery]]：基本的なjQueryの記述方法を1ページにまとめたサイト
jQuery開発者メモ：詳細な解説を1ページごとにまとめて記述
jQueryを学ぶための基本的なリンク集：jQueryを一切知らない場合はまずは概要の理解から
MyBASE JavaScript / jQuery：jQuery自体のソースコード解説など
jQuery日本語リファレンス：わからないことがあれば大抵解決。サンプルも多数あり

StackTrace jQueryAPI1.4.2日本語リファレンス：最新バージョンの機能をチェック
jQuery開発者John Resig氏(26)インタビュー：デバイスに最適化されたWebアプリ
jQueryのDOMによる操作メソッドの挙動の違い：DOM操作メソッドを使った挙動の違い
jQueryにおけるXSSを引き起こしやすい問題：意図せずに危険なコードを書かかれる可能性
javascriptライブラリー各外部パスの簡単コピーサイト：外部ラブラリを多様するには便利
jQuery1.6.1の.attr()と.prop()の違い：.attr()仕様変更がらみの話をわかりやすく解説

以下、英語ページはdemoというリンクから仕様を確認し、気に入ったプラグインを使用する場合は、適したページや位置にソースをコピーしてください。

実装のコツは、最初はオリジナルにカスタマイズしないで、そのままの状態で自分のサイトに適応させます。余計なソースをできるだけ削って、最低限のシンプルな構造を理解します。その後、少しずつページデザインに合わせて、部分的な変更をしてください。一度に全て変更した場合、表示がうまく行われないと、その原因が見つけずらくなります。

02「jQuery実装用サンプル【フォーム関連】」

exValidation：記述エラー表示。角丸のソフトなデザインと親切なソースコード解説（日本語）
Form Field Validation：記述エラー表示。背景色が現れ、どこに誤りがあるか人目でわかる
A Fancy AJAX Contact Form：記述エラー表示。PHPを合わせたクールなデザインフォーム
Adobe Spry Framework1.5：記述エラー表示。SpryWidgetで背景色の切り替え（日本語）
Masked Input Plugin：テキストボックス内の数字を記述途中に、ーや（）を自動で補助
AjaxZip2.0：郵便番号入力でテキストボックス内に自動で住所表示（prototype.js / 日本語）
Lettering Animate：アニメーションしながら少しずつ文字を表示
In-Field Labels：テキストフォームの中にあらかじめ薄く記述ヒントを表示（日本語）
Form Tips：テキストフォームの中にあらかじめ薄く記述ヒントを表示（日本語）
asmselect：フォームの行をドラッグ＆ドロップで移動
Easing Plugin：クリックでフォームの開閉パターンを30種類の中から選択
Improved Current Field Highlighting in Forms：テキストボックスに背景色の表示
In-Field Labels：テキストフォーム内の文字がオンクリックでうっすらと消える
Create a Progress Bar：フォーム書き込み後、次画面に移ると、その進行状況を％で表示
Contactable：ブラウザの隅にタブを設置し、クリックでお問い合わせフォームが出現
Build An Incredible Login Form：＋ボタンを押すとにょきっと大きいフォーム画面が出現
pageSlide：クリックするとサイドメニューが右サイド全体からにょきっと表示
Perfect signin dropdown box likes Twitter：ツイッター風デザインのフォームの実装
safari input type：サファリ風の検索ボックスの実装（日本語）
iPhone delete button：iPhone風のテキストボックス内の消去ボタンを実装（日本語）
jQselectable：セレクトボックスの選択文字を小窓で一斉表示
Slider from a Select Element now：セレクトボックスをスライダーで表示
FancyForm：ラジオボタンやチェックボックスのデザイン
Radiobutton- und Checkbox-Replacement：ラジオボタンやチェックボックスデザイン
checkbox v.1.3.0 Beta1：スイッチ型デザインのチェックボックス
Password Validation：簡易的なパスワードチェッカー。気持ち程度の効果。
その他のform関連リンク：星の5段階評価・パスワードの強度計測
Skuare.net：その他さまざまな高機能のフォーム補助リンク集（日本語）

03「jQuery実装用サンプル【ボタン／リンク／ナビ関連】」

jQuery Blend：オンマウスするとゆっくり画像が現れる
opacity-rollover2.1.js：さまざまな光の出現効果を表現したロールオーバー（日本語）
拡大フェードアウト：オンマウスすると連続して拡大しながら透明になる（日本語）
sliding_effect：オンマウスするとボタンが滑らかにスライドする（日本語）
jquery.cookie.js：メニューの開閉をクッキーに保持するjs（日本語）
上部固定に切り替るナビ：下にスクロールするとナビだけが上部に固定される（日本語）
スクロールで表示される色々なナビ：フッターやヘッダーやサイドから現れるナビ（日本語）
snap：リンクにオンマウスすると吹出しからリンク先ページを表示。カスタマイズも可能
Glance：リンクに吹出しが現れ、リンク先ページを表示。ブックマークや検索機能付き
coliss_jQueryTips：かっこいいナビゲーションのまとめ
Skuare.net：その他さまざまな高機能のプルダウンナビやロールオーバーのリンク集
jQuery.twinkle：円の波紋が何重にも広がっていくボタンのjQuery（英語）
Skuare.net：その他さまざまな高機能のテキスト操作やフォント関連のリンク集（日本語）

03「jQuery実装用サンプル【テーブル関連】」

SimpleFAQ：FAQのような回答スペースをクリックでアコーディオン表示
ThickBox3：画像やソースコードをボックス内に簡単表示
tablesorter：テーブル内の数字や文字を、各縦列ごとに並び替え
graphTable：HTMLのテーブルデータからグラフを作ってくれる
tableRowCheckboxToggle：行をクリックするとチェックボックスのオンオフが切り替わる
UI Table Edit：セルをクリックすることで編集可能になる
Colorize：マウスオーバーした列の背景をカラーリング
Animated Sortable Data Table：ページネーションやソート機能があるテーブル
jQuery Wisdom：その他のテーブル用プラグイン30個
Tablecloth：セルをオンマウスすると、縦横軸の背景色が切り替る

03「jQuery実装用サンプル【フォト関連】」

Cycle Plugin：さまざまなフォトのスライドバージョンを選択可能
モーダルウィンドウまとめ：さまざまなフォトのスライドバージョンのリンク集
Casual Slider：スライドの切り替り後に微動するJSコンテンツスライダー
Automatic Image Montage：大量の画像を超カッコよくブラウザ全体に敷き詰めてくれる
photo-effect：リアルに曲がったプリント写真風のフレームを実装（JavaScript）
フォトスタック：jQueryとCSS3を使って3D回転などでスライド表示
snipetUI：ボタンをクリックすると横にある画像が切り替る（日本語）
ContentHover：マウスオーバーすると画像に黒い影が敷かれテキストやボタンが表示される
droparea：ドラッグ&ドロップに対応したアップローダー
Galleria：フォトギャラリー。下層にカンプ画像が横スライドして上層で大きく表示
Photo Slider Tutorial：フォトギャラリー。下に小画像で上に大画像。CSSなので編集可能
fancybox：lightboxのjQuery版。クリックで拡大されたポップウィンドウが表示
prettyPhoto：lightboxのポップな角丸版。クリックで拡大されたポップウィンドウが表示
Skuare.net：その他さまざまな高機能の画像エフェクトやスライドのリンク集（日本語）
PLAX：紙芝居のような画像視差アニメのjQuery

04「jQuery実装用サンプル【その他UIツール関連】」

PHP SPOT：ページめくりを実現するためのjQueryプラグイン7つ
PHP SPOT：ちょっと変わったレイアウトにしたい時に参考にするプラグイン６つ
Animated Scroll：ページを下にスクロールするにつれTOPボタン自動表示（日本語）
Tiny Scrollbar：スクロールバーのデザインを変更できる軽量でクロスブラウザ対応（日本語）
PageScroll：カスタマイズ可能なアニメーションスクロールが実現できるjQuery（日本語）
reveal.js：モノトーンでクールなスライド用のjQuery（英語）
jticker：画面上で誰かがタイピングしているようにアニメーションできるjQuery（英語）
jScrollbar：独自デザインのスクロールバーが選択可能（日本語）
scrolldeck：スクロールしていくと様々なアイテムが現れるjQuery（日本語）
infinite scroll：要素を無限スクロールさせるjQuery（英語）
Facebook UI Design：フェースブックのデザインを再現するプラグイン23個
jQuery.easing.scroll.js：ページ移動スクロールを30種類のパターンで選択可能（日本語）
UPLOADIFY：データをアップロードするときのシンプルなロードバーデザイン
PieCharts/LineCharts：数値入力でCanvasタグを使って円や棒、折れ線グラフを描く
jQuery Org Chart：組織図を簡単に作れるjQueryプラグイン
jQuery.sheet：jQueryで作られた本格的表計算ソフト
Color Picker：カラーピッカーUI
DatePicker：3パターンのカレンダーUI
jQuery Favicon：faviconアニメや既存のアイコンに文字をプラスして表示が可能
Curvy Corners：軽量なアンチェイリアスの角丸を設定
Peel Effect with jQuery & CSS ：ページの角をめくるとメッセージが表示
Masonry：複数で大量のボックス要素を綺麗に隙間なくレンガ状に整列
Youtube動画マネージャ：Youtubeのポップアップウィンドウを表示（PHP / MySQL）
セレクタAPI：jQueryのCSSセレクタAPIを高速に扱う方法
Breakpoints.js：各表示サイズごとに異なるレスポンシブルデザイン設定
jquery.vgrid.js：ボックスの可変グリッドレイアウトjQueryプラグイン
yuga.js：中村享介氏が公開されてるWeb制作に役立つ機能が色々同梱されたプラグイン
Skuare.net：その他さまざまな高機能なリンク集（日本語）

05「jQuery実装用サンプル【リンク集】」

jQueryPluginSample [skuare.net]：画像、メニュー、フォーム他、様々なサンプルが掲載
よく使う定番系プラグインまとめ：単体や更に面白く作るのに役立つ定番系プラグイン
jQuery Clip：画像、メニュー、フォーム他、様々なサンプルがキレイなUIにて掲載
2012年4月リリースされたjQueryプラグイン40 ：積み木風ブロックレイアウトなど。
2011年jQueryプラグイン100総集編：この年はCSS3の影響でアニメエフェクト多し。
2011年使えるjQueryプラグイン50 ：2011年に公開された寄りすぐりのプラグイン50個。
2011年jQueryトレンドリンク紹介：2011年に紹介されたプラグインやチュートリアル。
2011年jQueryベストプラグイン：2011年に公開された寄りすぐりのプラグインです。
33+1選 -2011年9月：紹介済みから未紹介のものまでプラグイン34選です。
33+1選 -2010年11・12月：紹介済みから未紹介のものまでプラグイン34選です。
jQueryプラグイン100選2010年総集編：アニメエフェクトやレイアウト、背景画像など
jQueryPluginBest Trend 2010 ：かなり良質。ダイナミックなプラグインのリンク集
Best jQuery Tutorials for June 2009 ：ページ下に各デモリンクがありかなり良質
最新の素晴らしいプラグイン30 ：最近リリースされたプラグインをまとめたエントリー
flowplayer jQueryツール：オリジナルブランドによるリンク集
UnohLabs簡単Ajaxライブラリ：中級レベルユーザーのための実用的なプラグインを紹介
IE6、7でも動いてくれるjQuery30個：IE6,7とChromeは大抵動くはずのプラグイン
アニメーションエフェクト：画像のアニメーションを中心にしたリンク集（ページが重い）
大手企業が実装してるJavaScriptライブラリ：各ライブラリごとに分類したリンク集

Amazon.co.jp ウィジェット

>>目次に戻る