chevron_left

Webデザインの幅を広げる、jQuery【コードを記述する】

PREMIUM
第1回

Webデザインの幅を広げる、jQuery【コードを記述する】

2014年2月20日 60min

スライド資料

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

1 / 31

授業の概要

HTML5やAjaxと言った新しいテクノロジーの出現によって、Webデザインの世界も大きく変わってきました。とくに近年では「jQuery」を利用した動きのあるWebデザインが主流となっています。

そのため、これまでHTMLのコーディングやJavascriptのプログラムとは無縁であったデザイナーの人たちも、サイトの構成やデザインを考えるにあたって、jQueryがどのような動きを実現し、どのような役割をするのかを知っておく必要が出てきました。

今回の授業では、1月の基本編から、少しだけステップアップして、「jQueryのコードの書き方」を学習して、授業の後半で皆さんにも手を動かしていただきながら、簡単なプログラムを作成してみようと思います。

わずか数行のjQueryコードでjQueryがどのように動くのか、どのように記述すれば良いのか、という点を学んでいただければと思います。

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
自己紹介&アジェンダ
02:05
play_arrow
プログラムって何だ?
10:43
play_arrow
”function”って何だ?
01:24
play_arrow
jQueryでMac OSのDockを作ってみよう
09:43
play_arrow
jQuery日本語リファレンス
02:50
play_arrow
Q:head要素内や外部jsの$(function(){}とbody終了タグ直前に書くのとでは、レンダリング処理はどちらが早いですか?
01:42
play_arrow
Q:10円の周りの緑のラインは、どこに記述してあるのでしょうか?
01:38
play_arrow
Q:操作の痕跡として、マウスオーバーした時やマウスアウトした時に、元とは違う画像に変化させる事は可能でしょうか?
01:11
play_arrow
Q:jQueryプラグインというのがありますが、あれは例に出ていたカレーのレシピのような物と考えていいんでしょうか?
01:15
play_arrow
Q:させたい動きが沢山ある場合、命令毎にjQueryファイルを作った方がいいのでしょうか?
01:11
play_arrow
Q:フラッシュを使っていた頃の苦労話が聞きたいです。
01:47
play_arrow
Q:jQueryプラグインでCSSでレイアウトをいじってあるものを入れる時に、苦労した事があるのですが、先生はそういった事はありますか?
01:13
play_arrow
Q:jQueryのバージョンアップの時の苦労話は無いですか?
01:03
play_arrow
Q:基本的なIE6対策などあれば聞きたいです。
04:10
play_arrow
授業の応用技
03:52
play_arrow
Q:IE8はCSS3も効かないと聞いていますが如何ですか?
03:48
play_arrow
Q:これからの時代だとHTML5+CSS3+jQuery位は使いこなせると、何とか飯が食えて行けるんでしょうか?
03:33
play_arrow
Q:即興でカルーセルは簡単に出来るものですか?
04:19
play_arrow
課題発表