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);//確認用
その他実行したい処理;
});

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