chevron_left

レスポンシブサイトデザインコーディング実習
PREMIUM
第2回

レスポンシブなサイトにあっという間にjQueryを実装する

2014年2月17日 60min
レスポンシブなサイトにあっという間にjQueryを実装する play_arrow おためし受講

スライド資料

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

1 / 39

授業の概要

レスポンシブサイトデザイン第二段です。
前回の授業「Sublimeで書く簡単レスポンシブwebページ制作」 で制作したページにjQueryを実装します。

前回の授業に出ていない人も完成版をダウンロードできるので、 jQueryの実装を演習する事が出来ます。

サイトに色んな動きをもたらすjQueryは 今やスマホサイトには無くてはならないものに！
スマホサイトは可変幅が前提なのでちょっとしたコツが必要。
そのコツがサクっとわかり、 JavaScriptが分からなくても簡単に設置できるようになります。

■ お話すること■

1) スマホサイトになくてはならないjQuery
2) 動く画像を可変にする業
3) 実習：TOP画像をフェードさせてみよう！
4) 実習：TOP画像をカルーセルさせてみよう！
5) スマホエミュレーターで見てみよう

 

■ 必要なもの■

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

2)エミュレーターのインストール（win・Mac共通）
（※ブラウザでも確認できるのでなくても可）
まずAdobe Airをインストールします。
http://get.adobe.com/jp/air/
つづいてMobilizerをインストールします。
http://www.springbox.com/mobilizer/

 

■演習用素材について

授業資料のp36にある演習素材は、現在ご利用いただけない状態となっております。
素材が準備出来次第公開いたします。

ご迷惑をお掛けいたしますが、ご理解とご了承のほどよろしくお願いいたします。

 

 

 

担当の先生／パーソナリティ

チャプター

play_arrow
自己紹介＆アジェンダ
00:37
play_arrow
jQueryのライブラリとプラグイン
09:49
play_arrow
jQueryを料理に例えると
07:32
play_arrow
jQueryの演習開始！
20:13
play_arrow
jQueryプラグインをレスポンシブに対応する場合の注意
02:24
play_arrow
Q：先生がjQueryを学ぶ時に役にたった書籍はありますか？
04:23
play_arrow
Q：Max-widthの行をコメントアウトした理由は何ですか？
00:30
play_arrow
Q：jQuery Mobileというライブラリは、どういう位置づけのものでしょうか？
02:26
play_arrow
Q：ライトボックスはWeb作成で、よく使われていますでしょうか？
01:47
play_arrow
Q：jQueryにもhtmlやcssみたいに、辞書とかありますか？
01:04
play_arrow
Q：スマートフォン向けでフリックやスワイプ操作に対応するように、ライブラリが作られているんでしょうか？
02:48
play_arrow
Q：初心者が学習する際、JavaScriptをマスターしてから、jQueryに学ぶべきですか？
01:30
play_arrow
Q：最近ではjQueryで、大体の事は出来るようになってるんですか？
01:42
play_arrow
課題発表