Webデザインの幅を広げる、jQuery【コードを記述する】先生：保坂庸介

Webデザインの幅を広げるjQuery初級

Web業務においてあなたの専門は？
1. コード書きが専門だ

2. デザインのみ担当

3. コードも書くし、デザインもします

4. どちらも未経験です

デザイナーの方にこそ

jQueryやJavascriptで何ができるか

を知ってもらいたい。！

でも“jQuery”ってなんだろう？

jQueryとは

数あるJavascriptライブラリの

うちのひとつです！

と、一言で説明してしまう前に・・・

Webテクノロジー栄枯盛衰物語

Webサイトの構成と各テクノロジーの役割
CSS
HTML

レイアウト

構造化

Javascript
動作

Web素材
テキスト／画像

今から7〜8年くらい前、CSSがなかった頃…
Flash
HTML
構造化

レイアウト

Javascript
アニメーション

インタラクティブ
ブラウザ
制御

Web素材

テキスト／画像

まさに

IE6じゃ表示

カオス！
されないよ〜

マックだと文字出
てないね

FireFoxでずれ
るんだけど？

この画像、あと

1ピクセル右に！

レイアウト
変更！

どのブラウザでも同じ表示が可能な

FlashはWebデザインの花形だった

Flashくん

Javascriptくん

しかし、今から5年くらい前

CSSの出現によって、レイアウトが楽に！

HTML

CSS

文書の
構造化

レイアウト

役割をきっちり分けられるようになった！

もしかすると、

Javascriptを使ってCSSやHTMLを

リアルタイムに書き換えることが

できるんじゃね？

非同期という概念

そこで“Ajax”の登場！
同期通信

Top.html

page2.html

非同期通信

Top.html
Top.html

ページ遷移なしに情報を更新する！

再びJavascriptに注目が集まるように！

ぐぬぬ・・・

Javascriptくん

Flashくん

そんななか、Flashにさらなる追い打ちが・・・

iOSでFlashがサポートされず！

Javascriptの需要がますます高まることに

でもJavascriptのコマンドは長くて複雑…

Ajaxのプログラムを組むのは大変だぁ！

Javascriptを使って、

よく使うプログラムをまとめて

おけばいいんじゃね？

Javascriptライブラリ

という概念

例えば・・・

あるテキストボックス(div)の色を

変更したい場合
Javascriptだけだと・・・長い！
var
divTag
=

document.getElementsByTagName("div");

for
(var
i=0;i<divTag.length;i++){

if
((divTag[i].getA_ribute("className")||
divTag[i].getA_ribute("class"))="newClass"){

divTag[i].style.color="blue";}}

でもjQuery（Javascriptライブラリ）を使えば

$(div.newClass").css("color","blue");

たったこれだけ！！

赤字の部分をまとめて面倒みてくれる

これがJavascriptライブラリ
var
divTag
=

document.getElementsByTagName("div");

for
(var
i=0;i<divTag.length;i++){

if
((divTag[i].getA_ribute("className")||
divTag[i].getA_ribute("class"))="newClass"){

divTag[i].style.color="blue";}}

つまりJavascriptとライブラリの関係を

カレーで例えると・・・

Javascriptカレー

素のJavascriptでは自分で調味料を集めて、

ルーから作らなくちゃいけない

でもライブラリを使うと・・・・

Javascript
カレー

jQuery
カレー

ルーを入れるだけ！

便利なJavascriptライブラリが

いくつもリリースされた！
prototype.js
jQuery.js

Script.aculo.us

jQueryの特徴
文法が簡単
プラグインが豊富

エフェクト系に強い
サイズが小さい

jQuery
UIやjQuery
Mobileなど
用途に合わせたライブラリも用
意されている。

HTML5とJavascriptによる

Web2.0時代の到来だ！

Webテクノロジー栄枯盛衰物語

おしまい

それじゃ“jQuery”で何ができるの？

基本的にはCSSで表現できるものは

jQueryで制御することができる！

位置の移動

表示・非表示

拡大・縮小

透明化などなど

jQueryを利用したサイトデザイン例

h_p://wooofys.com

を開いてみてください！

ハンズオンタイム

jQueryプラグインを使って

Web絵本を作ろう！

用意するもの
・同じサイズの画像

・jQuery.js
（h_p://jQuery.com）

・trun.js

（h_p://www.turnjs.com/）

Webデザインの幅を広げる、jQuery【コードを記述する】先生：保坂庸介

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Webデザインの幅を広げる、jQuery【コードを記述する】先生：保坂庸介

Similar to Webデザインの幅を広げる、jQuery【コードを記述する】先生：保坂庸介 (20)

More from schoowebcampus

More from schoowebcampus (20)

Recently uploaded

Recently uploaded (12)