chevron_left

挫折した人のための 初心者速習HTML/CSS基礎
PREMIUM
第4回

挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】

2014年4月26日 90min
挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 play_arrow おためし受講

スライド資料

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

1 / 37

授業の概要

html+cssを挫折した全ての人に贈るシリーズ　全5回

このシリーズは1回で完結していますが、 1回から5回まで同じサイトがどんどん完成して行く形になっています。
1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。

第4回：初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】

初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても崩れてしまってうまく行かなかった人のためのJQuery入門です。
今回はビルボード画像がインタラクティブに入れ替わるカルーセルの作り方を学びます。

 

■ 必要なもの■

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

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:58
play_arrow
jQueryって何？
02:35
play_arrow
javascriptには必ず非対応ブラウザがある
03:28
play_arrow
jQueryのライブラリとプラグイン
03:07
play_arrow
jQueryの実装方法紹介
03:15
play_arrow
jQueryのメソッド紹介サイトの案内
02:29
play_arrow
実習前の準備
06:51
play_arrow
今回使うプラグインと演習をダウンロード
05:00
play_arrow
書いてみよう！
16:40
play_arrow
遷移後の画面を作成する
03:55
play_arrow
左右にスライドショーを移動できるようにする
05:00
play_arrow
スライドショーが移動できるか確認する
01:55
play_arrow
TOP画像を整理する
03:55
play_arrow
レスポンシブ対応しているかを確認
05:00
play_arrow
再度レスポンシブ対応しているか確認
05:25
play_arrow
Ｑ：画像が切り替わった時に、それぞれの画像ごとに、画像をクリックした際のリンク先を設定することは可能でしょうか？
00:55
play_arrow
Ｑ：jQueryの添付はローカルでやるのとCDNでやるのと、業界標準としてはどちらなんでしょうか？
01:50
play_arrow
Ｑ：Sublime３と２はかなり違いますか？
01:08
play_arrow
Ｑ：23行から63行の中のscriptソースの解説をしていただけますでしょうか？
03:35
play_arrow
Ｑ：授業とは関係ないんですが、<headr></headr><nav>等が機能しないの<div>ばかりです。
01:07
play_arrow
Ｑ：フェードを導入するページ、導入しないページはどんなことを気をつけて決めてますか？
03:03
play_arrow
課題発表