chevron_left

【再放送】jQueryプラグインの基本からカスタマイズまで

  • 【再放送】jQueryプラグインの基本からカスタマイズまで
第1回

【再放送】jQueryプラグインの基本からカスタマイズまで

2014年8月14日 180min

スライド資料

会員登録して、全てのスライドを見よう

1 / 32

授業の概要

■1限目:Webサイトに動きをつける、jQuery概論

jQueryの基礎を理解する全6回」の第1回目の授業です。
前回の授業(HTML&CSSの特訓授業〜jQuery(プログラミング)に取り組む前にコーディングの復習〜)で学習したhtmlに、jQueryを実行するスクリプトを書いて行きます。

■2限目:jQueryプラグインを設置するための環境構築

jQueryの基礎を理解する全6回」の第2回目の授業です。
jQueryプラグインの設置に必要なhtmlとcssの知識で学習したjQueryを読み込んだhtmlに、jQueryを実行するスクリプトを書いて行きます。

今回は、jQueryを設置していく際にしておくべきPCの設定方法について学びます。

■3限目:Webサイトに動きをつける、jQueryプラグインの設置方法

jQueryの基礎を理解する全6回」の第3回目の授業です。
jQueryプラグインの設置に必要なhtmlとcssの知識で学習したjQueryを読み込んだhtmlに、jQueryを実行するスクリプトを書いて行きます。

カルーセル/ライトボックスという2つのjQueryを実行するスクリプトを書いていきましょう。

■4限目:TOP画像をスライドさせるjQueryプラグインをカスタマイズする

jQueryの基礎を理解する全6回」の第4回目の授業です。

前回の授業(Webサイトに動きをつける、jQueryプラグインの設置方法)でjQueryプラグインをhtmlに呼び込む事ができました。
今回は、呼び込んだカルーセルのプラグインをカスタマイズして、スタイリッシュなものにブラッシュアップしていきます。
jQueryに触れた事の無い方は、下記の授業で勉強しましょう。

■5限目:クリックするとポップアップするjQueryプラグインをカスタマイズする

jQueryの基礎を理解する全6回」の5回目の授業です。
前々回の授業(jQueryプラグインをカスタマイズしよう!(カルーセル編))まででjQueryプラグインをhtmlに呼び込む事ができました。
前回のカルーセルのカスタマイズに続きまして、クリックすると画像がポップアップするプラグイン「ライトボックス」もスタイリッシュなものにブラッシュアップしていきます。

■jQueryとは

ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。Webデザインでは、Webサイトに動きをつけたい時などに用います。

このカリキュラムでは、「TOP画像を滑らかに横に動かす表示方法(カルーセル)」と「サムネイル画像をクリックするとホップアップ表示する方法(ライトボックス)」を学んでいきましょう。 

jQueryに触れた事の無い方は、下記の授業も参考にして勉強しておきましょう。

レスポンシブなサイトにあっという間にjQueryを実装する
挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】
挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。

■サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
この演習では、5番の開発の部分です。
完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。

■受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

 

チャプター

録画公開されると
チャプターが表示されます

play_arrow
play_arrow
play_arrow