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

アコーディオンメニューやスライドショー、ツールチップなど、頻繁に使われる10パターンのUIを実際に作ってみる講座です。

learn

こんなことを学びます

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');
-------------------------------------
続きを読む

日程・開催時間を選ぶ

開催リクエスト受付中

開催予定エリア

新宿・代々木

価格

¥8,000

受けたい
27人が受けたい登録しています

teacher

この講座の先生

フロントエンド人財育成のプロフェッショナル

株式会社モノサス所属現役フロントエンドエンジニア

フロントエンドエンジニア集団であるCodingFactoryの部長として、制作関連の責任者を歴任。
フロントエンドエンジニア・プロジェクトマネージャーとして大小問わず多くの案件を成功に導く。
[ http://coding-factory.com/ ]

現在は
・Web技術者育成カリキュラム「神山ものさす塾」講師
・株式会社モノサス海外支社にてWebエンジニアのインストラクター
などの人事教育業務に従事しとります。

「マネージャー職」でありながら、「現役エンジニア」を兼務していた経験から、「教えられる側の気持ち」に添った講座を心がけてます。

detail

講座詳細

  • 当日の流れとタイムスケジュール

    10:00~12:00
    (1) 基礎アニメーション
    (2) ロールオーバー
    (3) アコーディオンパネル
    (4) ツールチップ
    (5) スムーズスクロール

    12:00~13:00
     ランチ休憩

    13:00~17:00
    (6) ライトボックス
    (7) フォントサイズ切り替え
    (8) スライドショー
    (9) タブ切り替え
    (10) ランダム表示
    (11) パララックス効果


    ※適宜、途中休憩をはさみます。
  • こんな方を対象としています

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

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

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

    領収書はストリートアカデミーから発行できますので、社外での研修にもぜひご利用ください。
    http://goo.gl/2LiQep
  • 受講する際は以下をお読み下さい

    当日は以下の持ち物をご持参ください。

    ・インターネット接続可能なノートPC(Windows Mac問わず)
    ・電源アダプター
    ・テキストエディター
     文字コード:UTF-8が編集出来るもの
     行番号が表示されるもの
     ※秀丸、サクラエディターなど

review

レビュー

  • 4

  • 楽しかった!( 2 )

  • 勉強になった!( 3 )

  • 行く価値あり!( 2 )

  • 男性

    この講座は「楽しかった!」でした

    jQueryをベースに一般的なUIパーツの作成方法を学びました。講師の方は現場経験豊富で様々なテクニックを教えてあただけました。
    モバイルUI編もあると非常に嬉しいです!!

  • 女性 30代

    この講座は「中級者にもおすすめ」でした

    普段実務でjQueryは書いているけれど、どうしても自分の書き方のクセは出てしまう。今回の講座は初級編ではあるけれど、効率のよい書き方を考える切っ掛けになりました。
    質問にも丁寧に答えてもらえてありがたかったです。テキストは手元に置いておいて、実務の参考にしたいと思います。

  • 男性 30代

    この講座は「JQueryを一気に学べます。」でした

    JQueryの便利さが理解できました。サクサク進むので、JQueryの基本構造を知っている必要があります。

  • 男性 30代

    この講座は「JQueryの全体が把握出来る講座」でした

    細かいところまで丁寧に作り込まれていて、説明も分かりやすかったです。
    JQueryの本質部分も理解出来て、大満足でした。ありがとうございました。

  • more

    この先生の他の講座

    関連講座

    この講座を見た人は、こんな講座も見ています