jQuery初級 | jQueryで作るUI十選実践

jQueryで表現できるUIは多岐に渡ります。
しかし、それらを全て覚えるのは難しい・・・。

でも大丈夫。

沢山あるように見えるUIも、実はよくあるパターンの応用に過ぎないんです。


この講座は、

・jQueryでの表現方法を増やしたいけど、なかなかチャレンジする時間と機会が無い
・とりあえずプラグインで実現してるけど、それでいいのかな・・・と疑問を抱いている
・jQueryの基礎は分かったけど、次は何を学べば良いのか分からない

といった、「初級」レベルの方を対象とした講座となっています。

本講座で取り扱う「よくあるパターン」の構造を理解すれば、
あとは応用で自分なりの表現を実現する事が可能になります。


【どんな事をするの？】
漫然とプログラミングをするのではなく、
[解説]→[質問タイム]→[プログラミング]→[答え合わせ]→[質問タイム]
の流れに沿って、一つ一つの内容をしっかりと理解、習得できるように進めていきます。
質問タイムでは、どんどん質問しちゃってくださいね。


【途中でわからなくなったらどうしよう？】
講座は細かく区切って進めていきますので、ご安心ください。
もし、わからなくなってしまっても、都度「答え合わせ」で正解プログラムコードをお渡しするので、
つまづいた箇所だけを後で復習する事もできます。


【教わるのはどんな内容？】
(1) 基礎アニメーション
(2) ロールオーバー
(3) アコーディオンパネル
(4) ツールチップ
(5) スムーズスクロール
(6) ライトボックス
(7) フォントサイズ切り替え
(8) スライドショー
(9) タブ切り替え
(10) ランダム表示
(11) パララックス効果

といった内容について、解説とハンズオン形式で進めていきます。
聞いた事が無い用語も出てくるかもしれませんが、それらについても解説していきます。


【html/css/jsはどれくらい知ってればいい？】
下記のhtml/css/jsが読めれば、問題なく理解できる講座設計にしています。

-------------------------------------
<!--html-->
<div class="img-hero">
<img src="#">
</div>
-------------------------------------
/*--css--*/
#img-hero { display: none; }
-------------------------------------
//js
$('#img-hero').show('slow');
-------------------------------------