chevron_left

jQuery基礎〜Webサイトに動きをつける〜

PREMIUM
第4回

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

2014年7月3日 30min

スライド資料

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

1 / 4

授業の概要

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/

チャプター

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