ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/437/room ーーーーーーーーーーーーーーーーーーーーーーー

2. 本日のアジェンダ
!
1. jQueryのライブラリとプラグイン 20分
2. jQueryのクロスフェードを作ろう！5分
3. jQueryのカルーセルを作ろう！ 5分
4. jQueryをカスタマイズしよう！ 10分
5. 質疑応答と宿題 20分

5. http://www23.atwiki.jp/sevenlives/pages/1763.html

6. ４択
質 問
jQueryについて
学んだ事がありますか？
１）初めて学ぶ！
２）schooの生授業を受けた！
３）本を読んだ！
４）学校で習った！

7. jQueryの歴史など
詳しいお話はこちら！
保坂 庸介先生の
「Webデザインの幅を広げる、jQuery初級」
http://schoo.jp/class/379
Webデザインの幅を広げる、jQuery【コードを記述する】
http://schoo.jp/class/431

8. 「これから始める人のためのjQuery入門」は
24時間録画の
「デザイナー科」8限目で見放題！
http://schoo.jp/stream/designer

10. これを使うと・・・・・
!
1.JavaScriptの文法が恐ろしく簡単になる。
2.どんなブラウザにも対応する。
（IE6から最新iOSやAndloidまで）
3.プラグインの開発ができる。

11. jQueryライブラリを
添付して書く
JavaScriptはものすごく
簡単で短くなる！

13. さらに簡単にするために
プラグインを使う！

14. プラグインって何？

15. ライブラリは単体で使用しても
何も起こりません。
ライブラリを添付した状態で
jQueryの文法でスクリプトを
書く必要があります。

16. それも面倒くさい場合、
プラグインとして配布されている
オープンソースのコードの固まり
を添付します。

18. jQueryのプラグイン
!
!
http://jquery.com/

19. プラグイン使用の
jQueryとは
レトルト食品みたいな物
です。

24. コードをほとんど
書かなくていい！

28. <script>
</script>

30. メソッド

32. プラグイン

34. トウバンジャン
テンメンジャン

35. それでは、
ライブラリ本体と
プラグインを
ダウンロードして演習開始！

36. ライブラリ本体はローカルに落とさず、
絶対パスを添付してgoogleから引いてきます。
!
こちらからプラグインをダウンロード
https://github.com/viljamis/ResponsiveSlides.js
!
こちらから演習素材をダウンロード
https://github.com/Behomazn/jquery140217
!
（「Sublimeで書く簡単レスポンシブwebページ制作」
の演習課題を使用しています。
http://schoo.jp/class/423 ）
!
!

37. jQueryプラグインをレスポンシブに対応する場合の注意
width:100%;が指定されているか
jsやcssで
responsiveslides.jsの372行目
// Max-width fallback
if (typeof document.body.style.maxWidth ===
"undefined" && options.maxwidth) {
var widthSupport = function () {
$this.css("width", "100%");
if ($this.width() > maxw) {
$this.css("width", maxw);
}
};
とても
重要！

38. 宿 題
!
自分の作ったオリジナルのページ
にjQueryのライブラリを設置して
URLを張ってください。
レンタルサーバーをお持ちでない方は、
以下の無料レンタルサーバー等をご使用ください。
http://www.ninja.co.jp/hp/