Webサイトに動きをつける、jQuery概論

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

今回の授業は、「jQueryとはなにか？」という概要の理解です。簡単な説明は以下の通りです。

jQueryとは

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

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

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

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

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

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

１）クライアント（お客様）へのヒヤリング
２）ターゲット設定
３）サイト設計（ワイヤーフレーム）
４）制作仕様書策定（デザインルール、コーディングルール策定）
５）開発（デザイン＆コーディング）
６）ローカルテスト
７）テストサーバーレビュー（クライアントチェック）
８）リリース（本サーバーアップ）
９）ランニング（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/