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

Webデザイナーのための
JavaScript超入門
jQueryを使ってみよう

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights
2
JavaScriptについて

最近、動いている
Webサイト
多いですよね
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 3

Webサイトをみてみよう
• 虎ノ門ヒルズ
– http://toranomonhills.com/ja/
• 新生活に NHK
– http://www.nhk.or.jp/haru/
• NURO光 for マンションみんなの応募状況
– https://nuro.jp/mansion/status/
• ブリヂストンの電動アシスト自転車
– http://www.assista.jp/

この動きを
実現しているのが

JavaScript

今、Webデザイナに
求められる技術

それが
JavaScript

さて、質問です

JavaScriptは
コピペで使うもの？

そんな事は
ない！
全く無いわけではないです

JavaScriptの
役割

JavaScriptの役割
HTML・CSSの内容を
書き換えること
Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved.
13

HTMLの書き換え
<h1>こんにちは</h1>
14

HTMLの書き換え
<h1>おはよう</h1>
15

HTMLの書き換え
<h1>おはよう</h1>
16
Webサイトを表示した時刻に合わせて、文字を変更

HTMLの書き換え
<img src=“a01.jpg” />
17

HTMLの書き換え
<img src=“b03.png” />
18

HTMLの書き換え
19
Webサイトを表示ごとに、ランダムに画像を変更

CSSの書き換え
こんにちは h1{color:#000; font-size:16px}
20

CSSの書き換え
こんにちは h1{color:#000; font-size:32px;}
こんにちは h1{color:#0f0; font-size:6px;}
21

CSSの書き換え
22
見る人の環境に合わせて、文字サイズや文字色を変更

JavaScriptの役割
もう一つ
大切な役割
23

JavaScriptの役割
ユーザ操作を
取得
24

ユーザ操作
• 画像をクリックしたら・・・
25

ユーザ操作
• 文字にマウスを重ねたら・・・
26

JavaScriptのポイント
• HTML要素(タグ)を指定して、下記の作業
を行うことを意識する
– 要素の内容（文字）の変更
– 要素の属性値の変更
• alt属性、src属性、id属性など
– 要素に設定されているCSS
• color、padding、margin など

JavaScriptのポイント
• ユーザ操作(イベント)を取得する
– 画像をクリックしたら
– 文字にマウスを重ねたら
– 重ねたマウスを外したら

JavaScriptの
記述場所
29

HTMLファイルへの記述
• HTMLファイルに直接JSを記述
• 外部JSファイルの読み込み
<script>
JavaScriptのコードを記述
</script>
<script src=“ファイル名.js”></script>

JavaScript記述場所
• HTML要素(タグ)の構造を理解してからJS
を実行しないと誤動作する
– </body>の直前に記述する
• HTML要素を読み込んでからJSを実行させる
– window.onloadを利用する
• HTML要素や画像ファイルなど全てを読み込んでから実行
– DOMContentLoadedを利用する
• 要素の構造を理解してから実行する

• HTML要素(タグ)の構造を理解してからJS
を実行しないと誤動作する
– window.onloadを利用する
• HTML要素や画像ファイルなど全てを読み込んでから実行
– DOMContentLoadedを利用する
• 要素の構造を理解してから実行する
一番分かりやすい

JavaScriptの記述
• コメント（メモ書き）の記述
<body>
<script>
// 一行のみのコメント
/*
複数行のコメント
*/
</script>
</body>

JavaScriptの記述の流れ
1. 変更したいHTML要素を指定
2. 指定した要素にCSS / HTMLの変更
34

35
要素を
指定してみよう

36
JavaScriptに
よる記述

タグの指定方法してCSS変更
• <div id=“test”>の文字色を変更
var test = document.getElementsById(‘test’);
test.style.color = ‘#ff0000’;

JavaScriptへの
不満

タグの指定方法してCSS変更
• <div id=“test”>の文字色を変更
var test = document.getElementsById(“test”);
test.style.color = “#ff0000”;
ちょっと記述が長い

そこで
ライブラリの利用

• JavaScriptを利用したコンテンツ制作方法
– JavaScriptのみ
• カレーライスだと、各種香辛料・小麦粉からルーを自作して、ゼロか
らカレーを作る感じ
– ライブラリを利用（例：jQuery）
• カレーライスだと、市販のルーを利用し、野菜や肉は自分で調理して、
カレーを作る感じ
– ライブラリとプラグインを利用（例：jQuery + lightbox2など）
• カレーライスだと、市販のルーを利用し、カット野菜・冷凍シー
フードなどを利用して、軽く調理して、カレーを作る感じ
JavaScriptの利用について

jQueryの役割

JavaScriptの役割
簡単に短い記述で
HTML・CSSの内容を
書き換えること
43

• JavaScriptを簡単に短く記述できる、
JavaScriptの命令集（ライブラリ）です。
• 多くのサイトで、jQueryを普通に利用して
います。
jQueryとは

• JavaScriptのセレクタ指定を簡単に使用
する
var test = document.getElementsById(“test");
test.style.color = “#ff0000";
$(“#test").css("color", "#ff0000");
jQueryの例

とっても便利

• ダウンロードして外部読み込み
– http://jquery.com/
• リンク先を外部読み込み(CDN)
– https://developers.google.com/speed/libraries/#jquery
jQuery使用方法

書き方

• HTML要素(タグ)の構造を理解してから
JSを実行しないと誤動作する
– jQueryのreadyメソッドを利用する
• HTML要素の構造を理解してから実行する
• DOMContentLoadedを利用している

• 要素（DOM）の構造を理解して実行
$(function() {
// ここに実行したい内容を記述
});
jQueryのreadyメソッド
$(function(){ //実行内容 });
$(document).ready(function(){ //実行内容});
jQuery(function(){ //実行内容 });

• jQueryの記述の流れ
1. HTML要素(タグ)を指定する
→「セレクタ」と呼びます
2. セレクタの後に、「.やりたい事」と記述する
→やりたい事() メソッドと呼びます
→やりたい事プロパティと呼びます
jQueryの記述方法

• セレクタの指定 → $(‘要素’)と記述
$(‘div’) タグ名を選択
$(‘#id’) id名を選択
$(‘.class’) クラス名を選択
$(‘p a’) 子孫要素を選択
$(‘p, ul, div’) 複数要素の選択
$(‘dt+dd’) 隣接要素の選択
$(‘img[alt=“abc”] ’) 属性指定によるの選択
$(‘dt’).next() 隣接要素の選択
$(‘li:eq(0) ’) ○番目の選択
など・・・
CSSのセレクタ
と同じ
jQuery用セレクタ
まず要素（タグ）を選択

• 次にやりたい事(メソッド)を指定
セレクタ.メソッド(引数);

• 次にやりたい事をたくさん指定
セレクタ.メソッド(引数).メソッ
ド(引数).メソッド(引数)

55
基本はCSSの
変更

• CSSの設定/変更
セレクタ.css(‘color’, ‘#ff0000’);

• 複数のCSSを設定する場合
セレクタ.css({
‘color‘ : ‘#ff0000‘,
‘font-size‘ : ‘24px‘
});
複数の内容を設定する記述
{プロパティ：値 , プロパティ：値, プロパティ：値}

HTMLも基本

• 属性の変更 attr
$(‘img’).attr(‘src’, ‘test.png’);
<img src= "test.png" />;

• 複数の属性も設定できる
セレクタ.attr({
‘src’ : ‘abc.jpg’,
‘title’ : ‘abc’
});
{プロパティ：値 , プロパティ：値, プロパティ：値}

• タグ内にタグを追加 html
$(‘div’).html(‘<p>よろしく</p>’);
<div><p>よろしく</p></div>

• タグ内に文字を設定 text
$(‘div’).text(‘よろしく’);
<div>よろしく</div>

イベントも
大事

• クリックした場合
セレクタ.on(‘click’, function(){
//実行したいことを記述
});
ユーザ操作などのイベント

• 主なイベント
– click() クリック
– dblclick() ダブルクリック
– mouseover() 要素上にマウスが乗った
– mouseenter() 要素上にマウスが乗った (子要素に影響なし)
– mouseout() 要素上にあるマウスが離れた
– mouseleave() 要素上にあるマウスが離れた (子要素に影響なし)
– mousedown() マウスボタン押した
– mouseup() マウスボタンを離した
– mousemove() マウスが動いた

• イベントの場合によくある記述
– 実行したセレクタ → $(this)
$(this).css(‘color’, ‘#ff0000’);
});

• クリックしたらclassを追加
セレクタ.toggleClass (‘クラス名’);
});
クラスが有る場合はクラスを削除し、無い場合はクラスを追加

セレクタ.on({
'mouseenter':function(){
実行したい内容;
},
'mouseleave':function(){
実行したい内容;
}
});
複数のイベント設定

画像系の
プラグインを
使おう
69

jQuery 224
で検索
70

• HTML/CSSの理解は必須
– ファイル構造・要素の構成などを考えながら、
作業を行う
• 最低限のjQueryの知識が必要
– jQueryセレクタ、メソッド設定などの理解が
必要
• 英語でも頑張る
プラグイン使用時の注意

1. プラグインをダウンロード
– ファイルの中身を確認する
2. CSS / jQuery /プラグインの読み込みを入力
– ダウンロードしたファイル構造を確認しながら入力
– 必ずjQueryを指定する
– jQueryは複数指定しない
3. HTML要素をコピペ
– 要素の種類、属性などを確認しながらコピペ
4. jQueryの記述をコピペ
– セレクタを意識しながらコピペ
– オプション設定時は、複数設定
{ プロパティ：値, プロパティ：値}
プラグイン使用時の手順

Lightbox系
プラグインを
使おう
73

74
Lightbox系ライブラリ
• lightbox2
– 写真が拡大するライブラリ全般をLightbox系
と呼ぶくらい有名
• fancyBox
– 表示方法やアニメーションを変更できる
• Nivo Lightbox
– WebサイトやYoutubeも表示できる

スライド系
プラグインを
使おう
75

76
スライド系ライブラリ
• Basic jQuery Slider
– fadeとslideのみのベーシックなスライド
• Unslider
– 容量が軽く、カスタマイズが出来る
• Galleria
– 多機能なスライダー
• bxSlider
– 設置が簡単でシンプル

jQueryを
もう一度
（Pluginもいいけど、自作もね）
77

jQueryだけで
アニメしながら
トップに戻る
78

79
アニメしながらトップに戻る
• jQueryはやっぱり便利
– animateだけ、CSSに「scrollTop」プロパティが使
用できる
– ブラウザ上端から縦ピクセル距離を指定してスク
ロール移動することが出来る
– トップに移動する場合には、距離を０
セレクタ.animate(scrollTop, 距離);

ページ内リンクを
アニメーション移動
80

81
アニメしながらページ内リンク
• 要素の位置を調べる
– ページ内リンク
<a href=“#abc”> → <div id=“abc”>
– 考え方
• a要素をクリック
• hrefのidを取得 → #で値を区切る → split(‘#’)
• idが指定された要素の位置を調べる→offset()
• offset()のtop値を距離として、animateで移動

ページスクロールに
よるコンテンツ変化
（パララックス的な）
82

83
ページスクロールイベント
• ページスクロールしたら処理を実行
– jQuery の scroll()メソッド
• ページのブラウザ表示最上部位置を調べる
– jQuery の scrollTop()メソッド
$(window).scroll(function(){ //ページスクロールした
var py = $(this).scrollTop(); //ページトップ位置
console.log(‘py:’+py);//確認用
その他実行したい処理;
});

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

More Related Content

What's hot

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

More from Yossy Taka

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