SlideShare a Scribd company logo
1 of 83
Webデザイナーのための
JavaScript超入門
jQueryを使ってみよう
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights
2
JavaScriptについて
最近、動いている
Webサイト
多いですよね
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 3
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 4
Webサイトをみてみよう
• 虎ノ門ヒルズ
– http://toranomonhills.com/ja/
• 新生活に NHK
– http://www.nhk.or.jp/haru/
• NURO光 for マンション みんなの応募状況
– https://nuro.jp/mansion/status/
• ブリヂストンの電動アシスト自転車
– http://www.assista.jp/
この動きを
実現しているのが
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 5
JavaScript
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 6
今、Webデザイナに
求められる技術
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 7
それが
JavaScript
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 8
さて、質問です
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 9
JavaScriptは
コピペで使うもの?
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 10
そんな事は
ない!
全く無いわけではないです
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 11
JavaScriptの
役割
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 12
JavaScriptの役割
HTML・CSSの内容を
書き換えること
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
13
HTMLの書き換え
<h1>こんにちは</h1>
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
14
HTMLの書き換え
<h1>こんにちは</h1>
<h1>おはよう</h1>
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
15
HTMLの書き換え
<h1>こんにちは</h1>
<h1>おはよう</h1>
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
16
Webサイトを表示した時刻に合わせて、文字を変更
HTMLの書き換え
<img src=“a01.jpg” />
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
17
HTMLの書き換え
<img src=“a01.jpg” />
<img src=“b03.png” />
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
18
HTMLの書き換え
<img src=“a01.jpg” />
<img src=“b03.png” />
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
19
Webサイトを表示ごとに、ランダムに画像を変更
CSSの書き換え
こんにちは h1{color:#000; font-size:16px}
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
20
CSSの書き換え
こんにちは h1{color:#000; font-size:32px;}
こんにちは h1{color:#0f0; font-size:6px;}
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
21
CSSの書き換え
こんにちは h1{color:#000; font-size:32px;}
こんにちは h1{color:#0f0; font-size:6px;}
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
22
見る人の環境に合わせて、文字サイズや文字色を変更
JavaScriptの役割
もう一つ
大切な役割
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
23
JavaScriptの役割
ユーザ操作を
取得
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
24
ユーザ操作
• 画像をクリックしたら・・・
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
25
<img src=“a01.jpg” />
<img src=“b03.png” />
ユーザ操作
• 文字にマウスを重ねたら・・・
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
26
こんにちは h1{color:#000; font-size:32px;}
こんにちは h1{color:#0f0; font-size:6px;}
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 27
JavaScriptのポイント
• HTML要素(タグ)を指定して、下記の作業
を行うことを意識する
– 要素の内容(文字)の変更
– 要素の属性値の変更
• alt属性、src属性、id属性 など
– 要素に設定されているCSS
• color、padding、margin など
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 28
JavaScriptのポイント
• ユーザ操作(イベント)を取得する
– 画像をクリックしたら
– 文字にマウスを重ねたら
– 重ねたマウスを外したら
JavaScriptの
記述場所
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
29
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 30
HTMLファイルへの記述
• HTMLファイルに直接JSを記述
• 外部JSファイルの読み込み
<script>
JavaScriptのコードを記述
</script>
<script src=“ファイル名.js”></script>
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 31
JavaScript記述場所
• HTML要素(タグ)の構造を理解してからJS
を実行しないと誤動作する
– </body>の直前に記述する
• HTML要素を読み込んでからJSを実行させる
– window.onloadを利用する
• HTML要素や画像ファイルなど全てを読み込んでから実行
– DOMContentLoadedを利用する
• 要素の構造を理解してから実行する
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 32
JavaScript記述場所
• HTML要素(タグ)の構造を理解してからJS
を実行しないと誤動作する
– </body>の直前に記述する
• HTML要素を読み込んでからJSを実行させる
– window.onloadを利用する
• HTML要素や画像ファイルなど全てを読み込んでから実行
– DOMContentLoadedを利用する
• 要素の構造を理解してから実行する
一番分かりやすい
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 33
JavaScriptの記述
• コメント(メモ書き)の記述
<body>
<script>
// 一行のみのコメント
/*
複数行のコメント
*/
</script>
</body>
JavaScriptの記述の流れ
1. 変更したいHTML要素を指定
2. 指定した要素にCSS / HTMLの変更
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
34
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights
35
要素を
指定してみよう
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights
36
JavaScriptに
よる記述
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 37
タグの指定方法してCSS変更
• <div id=“test”>の文字色を変更
var test = document.getElementsById(‘test’);
test.style.color = ‘#ff0000’;
JavaScriptへの
不満
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 38
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 39
タグの指定方法してCSS変更
• <div id=“test”>の文字色を変更
var test = document.getElementsById(“test”);
test.style.color = “#ff0000”;
ちょっと記述が長い
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 40
そこで
ライブラリの利用
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 41
• JavaScriptを利用したコンテンツ制作方法
– JavaScriptのみ
• カレーライスだと、各種香辛料・小麦粉からルーを自作して、ゼロか
らカレーを作る感じ
– ライブラリを利用(例:jQuery)
• カレーライスだと、市販のルーを利用し、野菜や肉は自分で調理して、
カレーを作る感じ
– ライブラリとプラグインを利用(例:jQuery + lightbox2など)
• カレーライスだと、市販のルーを利用し、カット野菜・冷凍シー
フードなどを利用して、軽く調理して、カレーを作る感じ
JavaScriptの利用について
jQueryの役割
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 42
JavaScriptの役割
簡単に短い記述で
HTML・CSSの内容を
書き換えること
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
43
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 44
• JavaScriptを簡単に短く記述できる、
JavaScriptの命令集(ライブラリ)です。
• 多くのサイトで、jQueryを普通に利用して
います。
jQueryとは
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 45
• JavaScriptのセレクタ指定を簡単に使用
する
var test = document.getElementsById(“test");
test.style.color = “#ff0000";
$(“#test").css("color", "#ff0000");
jQueryの例
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 46
とっても便利
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 47
• ダウンロードして外部読み込み
– http://jquery.com/
• リンク先を外部読み込み(CDN)
– https://developers.google.com/speed/libraries/#jquery
jQuery使用方法
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 48
書き方
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 49
JavaScript記述場所
• HTML要素(タグ)の構造を理解してから
JSを実行しないと誤動作する
– </body>の直前に記述する
• HTML要素を読み込んでからJSを実行させる
– jQueryのreadyメソッドを利用する
• HTML要素の構造を理解してから実行する
• DOMContentLoadedを利用している
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 50
• 要素(DOM)の構造を理解して実行
$(function() {
// ここに実行したい内容を記述
});
jQueryのreadyメソッド
$(function(){ //実行内容 });
$(document).ready(function(){ //実行内容});
jQuery(function(){ //実行内容 });
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 51
• jQueryの記述の流れ
1. HTML要素(タグ)を指定する
→「セレクタ」と呼びます
2. セレクタの後に、「.やりたい事」と記述する
→やりたい事() メソッドと呼びます
→やりたい事 プロパティと呼びます
jQueryの記述方法
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 52
• セレクタの指定 → $(‘要素’)と記述
$(‘div’) タグ名を選択
$(‘#id’) id名を選択
$(‘.class’) クラス名を選択
$(‘p a’) 子孫要素を選択
$(‘p, ul, div’) 複数要素の選択
$(‘dt+dd’) 隣接要素の選択
$(‘img[alt=“abc”] ’) 属性指定によるの選択
$(‘dt’).next() 隣接要素の選択
$(‘li:eq(0) ’) ○番目の選択
など・・・
CSSのセレクタ
と同じ
jQuery用セレクタ
まず要素(タグ)を選択
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 53
jQueryの記述方法
• 次にやりたい事(メソッド)を指定
セレクタ.メソッド(引数);
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 54
jQueryの記述方法
• 次にやりたい事をたくさん指定
セレクタ.メソッド(引数).メソッ
ド(引数).メソッド(引数)
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights
55
基本はCSSの
変更
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 56
jQueryの記述方法
• CSSの設定/変更
セレクタ.css(‘color’, ‘#ff0000’);
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 57
jQueryの記述方法
• 複数のCSSを設定する場合
セレクタ.css({
‘color‘ : ‘#ff0000‘,
‘font-size‘ : ‘24px‘
});
複数の内容を設定する記述
{プロパティ:値 , プロパティ:値, プロパティ:値}
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 58
HTMLも基本
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 59
jQueryの記述方法
• 属性の変更 attr
$(‘img’).attr(‘src’, ‘test.png’);
<img src= "test.png" />;
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 60
jQueryの記述方法
• 複数の属性も設定できる
セレクタ.attr({
‘src’ : ‘abc.jpg’,
‘title’ : ‘abc’
});
{プロパティ:値 , プロパティ:値, プロパティ:値}
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 61
jQueryの記述方法
• タグ内にタグを追加 html
$(‘div’).html(‘<p>よろしく</p>’);
<div><p>よろしく</p></div>
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 62
jQueryの記述方法
• タグ内に文字を設定 text
$(‘div’).text(‘よろしく’);
<div>よろしく</div>
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 63
イベントも
大事
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 64
• クリックした場合
セレクタ.on(‘click’, function(){
//実行したいことを記述
});
ユーザ操作などのイベント
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 65
• 主なイベント
– click() クリック
– dblclick() ダブルクリック
– mouseover() 要素上にマウスが乗った
– mouseenter() 要素上にマウスが乗った (子要素に影響なし)
– mouseout() 要素上にあるマウスが離れた
– mouseleave() 要素上にあるマウスが離れた (子要素に影響なし)
– mousedown() マウスボタン押した
– mouseup() マウスボタンを離した
– mousemove() マウスが動いた
ユーザ操作などのイベント
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 66
• イベントの場合によくある記述
– 実行したセレクタ → $(this)
セレクタ.on(‘click’, function(){
$(this).css(‘color’, ‘#ff0000’);
});
ユーザ操作などのイベント
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 67
• クリックしたらclassを追加
セレクタ.on(‘click’, function(){
セレクタ.toggleClass (‘クラス名’);
});
ユーザ操作などのイベント
クラスが有る場合はクラスを削除し、無い場合はクラスを追加
Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 68
セレクタ.on({
'mouseenter':function(){
実行したい内容;
},
'mouseleave':function(){
実行したい内容;
}
});
複数のイベント設定
画像系の
プラグインを
使おう
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
69
jQuery 224
で検索
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
70
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 71
• HTML/CSSの理解は必須
– ファイル構造・要素の構成などを考えながら、
作業を行う
• 最低限のjQueryの知識が必要
– jQueryセレクタ、メソッド設定などの理解が
必要
• 英語でも頑張る
プラグイン使用時の注意
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 72
1. プラグインをダウンロード
– ファイルの中身を確認する
2. CSS / jQuery /プラグインの 読み込みを入力
– ダウンロードしたファイル構造を確認しながら入力
– 必ずjQueryを指定する
– jQueryは複数指定しない
3. HTML要素をコピペ
– 要素の種類、属性などを確認しながらコピペ
4. jQueryの記述をコピペ
– セレクタを意識しながらコピペ
– オプション設定時は、複数設定
{ プロパティ:値, プロパティ:値}
プラグイン使用時の手順
Lightbox系
プラグインを
使おう
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
73
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
74
Lightbox系ライブラリ
• lightbox2
– 写真が拡大するライブラリ全般をLightbox系
と呼ぶくらい有名
• fancyBox
– 表示方法やアニメーションを変更できる
• Nivo Lightbox
– WebサイトやYoutubeも表示できる
スライド系
プラグインを
使おう
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
75
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
76
スライド系ライブラリ
• Basic jQuery Slider
– fadeとslideのみのベーシックなスライド
• Unslider
– 容量が軽く、カスタマイズが出来る
• Galleria
– 多機能なスライダー
• bxSlider
– 設置が簡単でシンプル
jQueryを
もう一度
(Pluginもいいけど、自作もね)
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
77
jQueryだけで
アニメしながら
トップに戻る
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
78
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
79
アニメしながらトップに戻る
• jQueryはやっぱり便利
– animateだけ、CSSに「scrollTop」プロパティが使
用できる
– ブラウザ上端から縦ピクセル距離を指定してスク
ロール移動することが出来る
– トップに移動する場合には、距離を0
セレクタ.animate(scrollTop, 距離);
ページ内リンクを
アニメーション移動
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
80
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
81
アニメしながらページ内リンク
• 要素の位置を調べる
– ページ内リンク
<a href=“#abc”> → <div id=“abc”>
– 考え方
• a要素をクリック
• hrefのidを取得 → #で値を区切る → split(‘#’)
• idが指定された要素の位置を調べる→offset()
• offset()のtop値を距離として、animateで移動
ページスクロールに
よるコンテンツ変化
(パララックス的な)
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
82
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
83
ページスクロールイベント
• ページスクロールしたら処理を実行
– jQuery の scroll()メソッド
• ページのブラウザ表示最上部位置を調べる
– jQuery の scrollTop()メソッド
$(window).scroll(function(){ //ページスクロールした
var py = $(this).scrollTop(); //ページトップ位置
console.log(‘py:’+py);//確認用
その他実行したい処理;
});

More Related Content

What's hot

Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-Yossy Taka
 
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介しくみ製作所
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門Atsushi Tadokoro
 
JavaScriptことはじめ
JavaScriptことはじめJavaScriptことはじめ
JavaScriptことはじめYuki Ishikawa
 
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-Yossy Taka
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1Nishida Kansuke
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2Nishida Kansuke
 
はじめよう Backbone.js
はじめよう Backbone.jsはじめよう Backbone.js
はじめよう Backbone.jsHiroki Toyokawa
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1Nishida Kansuke
 
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介schoowebcampus
 
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことJavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことMayu Kimura
 
Angular js or_backbonejs
Angular js or_backbonejsAngular js or_backbonejs
Angular js or_backbonejsOmasa Yusaku
 
Kawaz的jQuery入門
Kawaz的jQuery入門Kawaz的jQuery入門
Kawaz的jQuery入門Kohki Miki
 
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1daisuke shimizu
 
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門Toshiaki Maki
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそうWataru OKAMOTO
 
backbone.jsの使用例 その1
backbone.jsの使用例 その1backbone.jsの使用例 その1
backbone.jsの使用例 その1Makoto Haruyama
 
Web development fundamental
Web development fundamentalWeb development fundamental
Web development fundamentalTakuya Kumagai
 

What's hot (20)

2時間で学ぶjQuery
2時間で学ぶjQuery2時間で学ぶjQuery
2時間で学ぶjQuery
 
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
 
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
 
JavaScriptことはじめ
JavaScriptことはじめJavaScriptことはじめ
JavaScriptことはじめ
 
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
はじめよう Backbone.js
はじめよう Backbone.jsはじめよう Backbone.js
はじめよう Backbone.js
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
 
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
 
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことJavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
 
Angular js or_backbonejs
Angular js or_backbonejsAngular js or_backbonejs
Angular js or_backbonejs
 
Backbone.js入門
Backbone.js入門Backbone.js入門
Backbone.js入門
 
Kawaz的jQuery入門
Kawaz的jQuery入門Kawaz的jQuery入門
Kawaz的jQuery入門
 
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
 
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそう
 
backbone.jsの使用例 その1
backbone.jsの使用例 その1backbone.jsの使用例 その1
backbone.jsの使用例 その1
 
Web development fundamental
Web development fundamentalWeb development fundamental
Web development fundamental
 

Similar to WebデザイナのためのjQuery入門。

Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2Moto Yan
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門Hiroki Toyokawa
 
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関してShoei Takamaru
 
DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所Ryo Sasaki
 
食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略Tsuji Yuko
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作西畑 一馬
 
Web development fundamental_v2
Web development fundamental_v2Web development fundamental_v2
Web development fundamental_v2Takuya Kumagai
 
HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座アシアル株式会社
 
Automation with SoftLayer and Zabbix
Automation with SoftLayer and ZabbixAutomation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbixsoftlayerjp
 
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-Yossy Taka
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittrkenjis
 
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Masakazu Muraoka
 
20110714 j queryベーシック
20110714 j queryベーシック20110714 j queryベーシック
20110714 j queryベーシック良太 増子
 
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #SeleniumjpSeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #SeleniumjpYahoo!デベロッパーネットワーク
 
WordBench Nagoya 201601
WordBench Nagoya 201601WordBench Nagoya 201601
WordBench Nagoya 201601kuma2515
 
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうWordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうHishikawa Takuro
 
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜Yuki Minakawa
 

Similar to WebデザイナのためのjQuery入門。 (20)

Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
 
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して
 
DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所
 
食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
 
Web development fundamental_v2
Web development fundamental_v2Web development fundamental_v2
Web development fundamental_v2
 
HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座
 
Automation with SoftLayer and Zabbix
Automation with SoftLayer and ZabbixAutomation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
 
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittr
 
Spring Boot on Kubernetes : Yahoo!ズバトク事例 #jjug_ccc
Spring Boot on Kubernetes : Yahoo!ズバトク事例 #jjug_cccSpring Boot on Kubernetes : Yahoo!ズバトク事例 #jjug_ccc
Spring Boot on Kubernetes : Yahoo!ズバトク事例 #jjug_ccc
 
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
 
JSDoc ToolKit
JSDoc ToolKitJSDoc ToolKit
JSDoc ToolKit
 
20110714 j queryベーシック
20110714 j queryベーシック20110714 j queryベーシック
20110714 j queryベーシック
 
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #SeleniumjpSeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
 
WordBench Nagoya 201601
WordBench Nagoya 201601WordBench Nagoya 201601
WordBench Nagoya 201601
 
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうWordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
 
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
 
JavaScript 研修
JavaScript 研修JavaScript 研修
JavaScript 研修
 

More from Yossy Taka

WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置Yossy Taka
 
Bracketsを使おう
Bracketsを使おうBracketsを使おう
Bracketsを使おうYossy Taka
 
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方Yossy Taka
 
JavaScriptによるvideo audio要素のコントロール入門
JavaScriptによるvideo audio要素のコントロール入門JavaScriptによるvideo audio要素のコントロール入門
JavaScriptによるvideo audio要素のコントロール入門Yossy Taka
 
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-Yossy Taka
 
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信Yossy Taka
 
HTML5 Local Storageを利用したメモ帳アプリ
HTML5 Local Storageを利用したメモ帳アプリHTML5 Local Storageを利用したメモ帳アプリ
HTML5 Local Storageを利用したメモ帳アプリYossy Taka
 
Canvasでペイントアプリ作成
Canvasでペイントアプリ作成Canvasでペイントアプリ作成
Canvasでペイントアプリ作成Yossy Taka
 
JavaScript 基礎文法のまとめ
JavaScript 基礎文法のまとめJavaScript 基礎文法のまとめ
JavaScript 基礎文法のまとめYossy Taka
 
canvasによるアナログ時計の作成
canvasによるアナログ時計の作成canvasによるアナログ時計の作成
canvasによるアナログ時計の作成Yossy Taka
 
Canvasによるデジタル時計制作入門
Canvasによるデジタル時計制作入門Canvasによるデジタル時計制作入門
Canvasによるデジタル時計制作入門Yossy Taka
 
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-Yossy Taka
 
Canvas入門01-図形描画とJS活用-
Canvas入門01-図形描画とJS活用-Canvas入門01-図形描画とJS活用-
Canvas入門01-図形描画とJS活用-Yossy Taka
 
Emmetの使い方
Emmetの使い方Emmetの使い方
Emmetの使い方Yossy Taka
 

More from Yossy Taka (14)

WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置
 
Bracketsを使おう
Bracketsを使おうBracketsを使おう
Bracketsを使おう
 
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方
 
JavaScriptによるvideo audio要素のコントロール入門
JavaScriptによるvideo audio要素のコントロール入門JavaScriptによるvideo audio要素のコントロール入門
JavaScriptによるvideo audio要素のコントロール入門
 
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
 
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
 
HTML5 Local Storageを利用したメモ帳アプリ
HTML5 Local Storageを利用したメモ帳アプリHTML5 Local Storageを利用したメモ帳アプリ
HTML5 Local Storageを利用したメモ帳アプリ
 
Canvasでペイントアプリ作成
Canvasでペイントアプリ作成Canvasでペイントアプリ作成
Canvasでペイントアプリ作成
 
JavaScript 基礎文法のまとめ
JavaScript 基礎文法のまとめJavaScript 基礎文法のまとめ
JavaScript 基礎文法のまとめ
 
canvasによるアナログ時計の作成
canvasによるアナログ時計の作成canvasによるアナログ時計の作成
canvasによるアナログ時計の作成
 
Canvasによるデジタル時計制作入門
Canvasによるデジタル時計制作入門Canvasによるデジタル時計制作入門
Canvasによるデジタル時計制作入門
 
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
 
Canvas入門01-図形描画とJS活用-
Canvas入門01-図形描画とJS活用-Canvas入門01-図形描画とJS活用-
Canvas入門01-図形描画とJS活用-
 
Emmetの使い方
Emmetの使い方Emmetの使い方
Emmetの使い方
 

Recently uploaded

2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也harmonylab
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...yoshidakids7
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 

Recently uploaded (13)

2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 

WebデザイナのためのjQuery入門。