jQuery中級 ローテーションバナー実装編 Webtantオンラインスクール(eラーニング) | WEBスマホ業務専門お仕事情報サイト「ウェブタント」
WEB・モバイル専門 人材派遣・紹介(関東/関西/東海)
WEBデザイナー、ディレクター、ネットショップ運営スタッフなどWEBモバイル業務専門の求人情報サイト
職種別 求人情報
Webディレクター
Webデザイナー
htmlコーダー
ネットショップ運営
リスティング運営業務
携帯サイト運営
WEB系一般事務
その他
特集

Webtant オンラインスクール 分単位のスキ間時間に知りたい内容だけ受講できる!

jQuery

jQuery中級セミナー
ローテーションバナー実装編

  •  一般
  •  会員 20%off
       ・メールマガジン読者様(ダイサポ/ウェブタント通信
       ・派遣先企業様 ・サポタント派遣登録スタッフ ・元派遣スタッフ
  •  特別会員 50%off
       ・サポタント現就業スタッフ 

     

セミナー内容

全章まとめて購入する 再生時間 : 107分57秒

jQueryの基本的な文法と予めjQueryに備わっている機能の一部を理解し(1〜4章)、WEB制作現場で利用頻度が高いjQueryでローテーションバナーを制作します。
カスタマイズの幅が広がるよう各スクリプトをeラーニング方式で解説しながら実習していく内容です(5〜8章)。 また、基盤となるJavaScriptの知識がない、浅い方でも取り組みやすい内容です。

【制作環境】
 Dreamweaverを利用していますが、その他お手持ちのテキストエディターでも実習可能です。

【データについて】
・セミナー動画は(wmv)はストリーミング再生専用
・実習データ(zip)はダウンロードしてご利用ください

【視聴できる期限について】
 無期限でいつでも繰り返し視聴できます。

【無料】 サンプル動画を再生:52秒

一般価格:10,800円(税込)

会員価格:8,640円(税込)

特別価格:5,400円(税込)

1章 jQueryの基礎文法 再生時間 : 4分12秒

jQueryは非常な単純な文法でHTML要素に対してさまざまな処理を実行することができます。
ここではjQueryの基本的な文法と各要素(エレメント、セレクタ、メソッド、イベント、プロパティ)の役割について確認します。

一般:400円(税込)購入する
会員:320円(税込)購入する
特別会員:200円(税込)購入する

2章 セレクタ―:対象の選択 再生時間 : 4分59秒

HTML/CSSの書き方と同様にjQueryでもCSSのような書式でデザインをコントロールできることを解説します。
jQueryに実装されている機能の中からFilter機能、form要素の紹介など。

一般:500円(税込)購入する
会員:400円(税込)購入する
特別会員:250円(税込)購入する

3章 マウスイベントの取得 再生時間 : 6分41秒

代表的なイベントである「マウスイベント」を例にとってイベントに対する具体的な処理の書き方を解説します。
リンクをクリックするとアラートが出たり、テキスト色を変える方法(click())や、マウスのロールオーバー(mouseover()、mouseout()、hover())など実習します。また、セレクタ内によく使われる"this"の解説をします。

一般:700円(税込)購入する
会員:560円(税込)購入する
特別会員:350円(税込)購入する

4章 アニメーションを自作する 再生時間 : 8分8秒

実際にイベントに合わせてエレメントをアニメーションさせる記述方法を解説します。
ここではマウスイベントに対応するアニメーションを実習します(fadeIn()、fadeOut()や、
実行速度を指定できるパラメータ/引数について)。
CSSと同程度の記述でマウスオーバーすると画像が左右に移動するといったアニメーションを簡単に実装できることを実習できます(animate())。

一般:800円(税込)購入する
会員:640円(税込)購入する
特別会員:400円(税込)購入する

5章 スライドトランジション 再生時間 : 21分50秒

5章から8章は、今までの実習内容を基に、より実践的な画像のトランジションを実習します。
ローテーション表示されるバナーやサイトのトップページのメインビジュアルの切り替えなどでよく利用されています。
ここではサムネールをクリックするとメイン画像が左右からスライドする「スライドトランジション」の解説(関数の定義、関数の実行など)と実装実習をします。
また、もうひと手間でアニメーションに変化をつける、jquery.easing.jsの読み込み方も紹介しています。

一般:2,200円(税込)購入する
会員:1,760円(税込)購入する
特別会員:1,100円(税込)購入する

6章 フェードトランジション 再生時間 : 21分56秒

サムネールをクリックするとフェードインでメイン画像を呼び出す「フェードトランジション」を実習します。
ここで必要な「変数」の機能についての解説します。

一般:2,200円(税込)購入する
会員:1,760円(税込)購入する
特別会員:1,100円(税込)購入する

7章 カルーセル(1) 再生時間 : 19分22秒

ローテーションのバナーをループさせる「カルーセル」について。変数、関数、条件式、配列、ループ処理といったJavaScriptの基礎構文の集大成となる機構です。
条件分岐でもっともよく使われる構文、条件分岐(if文)やループ処理(for文)や配列の解説など必要なJavaScriptの機能について説明をします。(実装実習は8章に続きます)

一般:1,900円(税込)購入する
会員:1,520円(税込)購入する
特別会員:950円(税込)購入する

8章 カルーセル(2) 再生時間 : 20分46秒

実際にソースコードを入力しながらカルーセルを実装していきます。
小さなプログラムの集合をそれぞれ解説しています。動画を止めてソース入力しながら実習できます。(7章の続きの内容です)

一般:2,100円(税込)購入する
会員:1,680円(税込)購入する
特別会員:1,050円(税込)購入する

講師紹介

安部卓也氏の顔写真
安部卓也氏

東京都内の制作会社 シサン在籍のWebクリエイター。
実務ではサイトのデザイン、設計からPHP、 Flash、JavaScriptを使ったプログラミングなど担当しています。
制作サイトは企業のコーポレートサイトから広告系のオールFlashサイトなど様々。
実際 の制作現場で得た知識やノウハウなどを受講者の皆さんにとって有益なかたちで伝えられるようガンバリます。

受講生の声

H.K.さん男性

順をおって説明していただけたので、何がどういった動きをさせれるのか処理をするのがよくわかった。

M.H.さん男性

スライド、カルーセルの動きの中身を詳しく知ることができるなど、少ない時間で色々勉強できて満足度満点でした。実案件で利用します。