おためし受講中

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

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

前回の授業(Webサイトに動きをつける、jQueryプラグインの設置方法)でjQueryプラグインをhtmlに呼び込む事ができました。
今回は、呼び込んだカルーセルのプラグインをカスタマイズして、スタイリッシュなものにブラッシュアップしていきます。
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/

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    03:46  (00:12 ~ )
    プロジェクトを読み込んでみよう
    01:44  (03:58 ~ )
    ResponsiveSlides.js-master/demo/demo.htmlの中の<ーー Slideshow 4 ーー>以下の文字列をコピーしよう
    01:36  (05:42 ~ )
    index.htmlのビルボードのimgタグの下にペースト。貼付けたら呼び出すイメージの名前をリネームしよう
    01:07  (07:18 ~ )
    headタグの中に前回に作ったCallback.cssへのlinkタグを設定しよう
    01:18  (08:25 ~ )
    bodyの終了タグの上に書いたscriptタグの内、jQueryのライブラリ読み込みタグの下に続けて、プラグインの読み込みタグを書いてみよう
    02:02  (09:43 ~ )
    Callback.cssの中に書かれている、スライドさせるための左右クリックボタン用の画像themes.gifのパスを正しいパスに変更しよう
    01:08  (11:45 ~ )
    Callback.cssから2行目〜17行目迄の不要な部分を削除しよう
    00:36  (12:53 ~ )
    index.htmlのヘッド内にあるビルボードのimgタグは必要ないので削除しよう
    02:12  (13:29 ~ )
    Topボタンがカルーセルの下にもぐるので、style.cssのセレクタ、.gototopにz-indexに大きな数値をいれて重ね順を一番上にしよう
    03:12  (15:41 ~ )
    【後半】質疑応答
    Q:z-indexは結構いつも適当な値いれるけど、先生の中でルールてきなのありますか?
    01:37  (20:18 ~ )
    Q:おすすめのjqueryスライダーはなんですか?
    01:20  (21:55 ~ )
    Q:サイトを公開したあとjQueryのバージョンが上がったりした場合随時更新しますか? プラグインによっては動作が変わったりすることもあり、メンテナンスが大変ですが何か指針のようなものはありますか。
    01:07  (23:15 ~ )
    Q:z-indexの上限値は約21億だそうですが、先生は実務でどの程度の数字を上限で使用されていますか?
    01:25  (24:22 ~ )
    Q:プラグイン同士がコンフリクトしたときは、どのように解決していくといいですか?
    01:23  (25:47 ~ )
    レポート課題発表
      (27:10 ~ )