はじめに数年前であれば Flash を使用して表現していたインタラクティブな演出やアニメーションが、
ここ最近は Flash に対応していないスマートフォンやタブレットなどの多様化に伴って、そのほとんどが JavaScript で表現されるようになりました。
このような大きな潮流の中で注目を集めているのが「jQuery」です。複雑なコードになりがちな JavaScript を手軽に扱うことのできる jQuery は、今では Web クリエイターにとって必要不可欠な存在になっています。それにより、関連書籍も多数存在していますが、反面そのほとんどは開発者が一人で執筆しているため、プログラムを深く理解していることが前提の解説となっているものが多く、日常的にプログラミングを行っていないデザイナーにとってはとっつきにくい内容になっているものが多いのが現状です。
そこで本書では「プログラム経験の少ないデザイナーでも容易に理解できる構成」を第一の目標として執筆を行いました。技術的な側面の解説やプログラミング手法、jQuery の詳細解説について
は、現場の第一線で日々業務を行っている経験豊富なプロフェッショナルの開発者が執筆を担当していますが、その一方で、執筆期間中は jQuery の知識が全くないデザイナーや、プログラミ
ング未経験者を執筆チームに加えることで、これから jQuery を学ぶ人が「どこにつまづき」、「何に疑問を抱くのか」を常に検証し、そしてブラッシュアップしていきました。こういった日々の作業によって、確かな技術書として、より多くの人にとって最良の書籍となることを目指しました。この点は本書の強みの 1 つです。
また、Web デザイン関連の書籍においては、学習過程で使用するサンプルのクオリティも非
常に大切だと考えています。そのため本書では、ただ単に解説を補足するような単純すぎるサン
プルの掲載を避け、多くの人が「作ってみたい」、「仕事でも使えそうだ」と感じるようなサンプ
ルであることを目指しました。本書内で使用するサンプルはすべて、第一線で活躍するアート
ディレクター監修の元、現場で多くのプロモーションサイトを制作しているインタラクションデ
ザイナーが制作しています。ぜひ、実際に手を動かしてこれらのサンプルを制作し、jQuery をより深く習得していただけると嬉しいです。
今後、世の中のデジタル化が進むことは間違いありません。そして、その社会を作っていくう
えで重要な役割を担うのは、みなさんをはじめとするクリエイター達です。本書が、みなさんがこれから制作していくであろうサイトや作品の一助となり、新しい表現が Web 上に登場することを心より祈っています。
最後に、通常の案件業務がありながらも、社内をマネジメントしてくれた仲村くん、素晴らしいサンプルを作ってくれた許くん、奥村さん、そして、執筆を担当した、安友さん、丈さん、鈴木慶太郎くん、本当にお疲れさまでした。そして執筆チームの面倒を丁寧にみてくださった SB ク
リエイティブの岡本晋吾さん、そして、何よりこの本を手に取ってくれた読者の方に感謝いたします。

2013 年 11 月
株式会社シフトブレイン
代表取締役

加藤琢磨
3

Contents●

コードの解説�������������������������������������������������������������������������39●

サンプルコードを書き替えてみよう！ �����������������������������������������40
Column 数値と文字列の違いに注意する�����������������������������������������������42

Contents●

jQuery の最も基本的な構文の解説���������������������������������������������42●

HTML の準備が整うのを待つ仕組み��������������������������������������������46●

ここまでのまとめ �������������������������������������������������������������������48

本書のサンプルデータ������������������������������������������������������������������� 2

Column css() メソッドに関する追加説明���������������������������������������������49

02-03

STEP 2

コードの解説�������������������������������������������������������������������������52●

サンプルコードを書き替えてみよう！ �����������������������������������������54●

メソッドチェーンとは��������������������������������������������������������������57●

ここまでのまとめ �������������������������������������������������������������������58

r

●

te
ha
p
C

jQuery の基礎知識と本書の特徴

01
01-01

13

02-04

jQuery の基礎知識�����������������������������������������������������������14

STEP 3

コードの解説�������������������������������������������������������������������������59●

jQuery とは��������������������������������������������������������������������������14●

サンプルコードを書き替えてみよう！ �����������������������������������������61●

jQuery の特徴と広く利用されている理由������������������������������������17●

その他の主な引数 �������������������������������������������������������������������62

本書の目的と構成������������������������������������������������������������23●

animate() メソッドの仕様に関する注意点������������������������������������66●

本書の目的と特徴的な解説方法��������������������������������������������������23●

ここまでのまとめ �������������������������������������������������������������������68●

本書の構成����������������������������������������������������������������������������24

jQuery のダウンロード������������������������������������������������������������30pt

サンプルファイルのダウンロード�����������������������������������������������28

●

ha

●

er

jQuery の実行環境の準備�����������������������������������������������28

03

jQuery の基本的な書き方

03-01

データを格納するさまざまな入れ物����������������������������70●

Chrome を使用したデバッグ ����������������������������������������������������32●

Safari を使用したデバッグ�������������������������������������������������������33

pt
ha
C

3ステップではじめるかんたんjQuery入門

02
02-01

35

体験することからはじめよう！������������������������������������36●●

サンプルファイルについて��������������������������������������������������������36
本書の解説の流れ �������������������������������������������������������������������38
Column JavaScript の記述場所������������������������������������������������������38

02-02
4

69

デバッグ方法��������������������������������������������������������������������32

er

01-04

Column さまざまなイージング���������������������������������������������������������64

C

01-03

アニメーションさせてみよう ������������������������������59●

Column ライブラリ、プラグイン、関数、拡張ライブラリの違い��������������������22

01-02

タイミングをコントロールしてみよう ��������������51

STEP 1CSS のスタイルを変更してみよう

03-02

●

オブジェクトとは �������������������������������������������������������������������70●

変数とは�������������������������������������������������������������������������������71●

配列とは�������������������������������������������������������������������������������75●�����������������������������������������������������������������77
特殊な入れ物「this」

 ��������������������������������������� 82
特定の機能をまとめる「関数」●

関数とは�������������������������������������������������������������������������������82●

用意されている関数とオリジナルの関数���������������������������������������83●

関数の作り方�������������������������������������������������������������������������83●関数の呼び出し方 �������������������������������������������������������������������84●

無名関数�������������������������������������������������������������������������������85
Column 無名関数を変数に格納する����������������������������������������������������86��������������������39

5

Contents

03-03

03-04

04-04

見え隠れするサイドバー���������������������������������������������� 123●スコープ�������������������������������������������������������������������������������87●

サイドバーの HTML�������������������������������������������������������������� 123●

変数名と関数名の命名規則��������������������������������������������������������88●

サイドバーの CSS���������������������������������������������������������������� 124

Column 変数や関数（メソッド）の返り値を確認する方法�����������������������������89●����������������������������������������� 125
サイドバーの JavaScript（jQuery）●

button 要素がクリックされた際に最初に実行される処理��������������� 126●

if 文による分岐処理��������������������������������������������������������������� 126

演算子��������������������������������������������������������������������������������90●

算術演算子����������������������������������������������������������������������������90●

代入演算子����������������������������������������������������������������������������90●

比較演算子����������������������������������������������������������������������������91●

論理演算子����������������������������������������������������������������������������92

Column toggleClass()、addClass()、removeClass() メソッド����������������� 128

04-05

主な制御文������������������������������������������������������������������������93

タイポグラフィの表現�������������������������������������������������� 129●

タイポグラフィ表現の HTML�������������������������������������������������� 129●

タイポグラフィ表現の CSS����������������������������������������������������� 130����������������������������� 130
タイポグラフィ表現の JavaScript（jQuery）

プラグインの使い方��������������������������������������������������������������� 131●

条件分岐＿ if 文����������������������������������������������������������������������93●●

条件分岐＿ switch 文��������������������������������������������������������������95●●

繰り返し処理＿ for 文��������������������������������������������������������������96

Column プラグイン『jquery.typoshadow.js』の処理内容������������������������� 132

er

03-05

スコープと命名規則��������������������������������������������������������8705

活用の幅を広げるjQuery の必修テクニック

05-01

Basic

ha

pt

04

C

er
C

ha

pt

確かな基礎力を養う
jQuery の基本テクニック

9904-01	さまざまなホバーエフェクトで学ぶ

動きのある表現の基本�������������������������������������������������� 100

スライドショーの概要������������������������������������������������������������ 135●

スライドショーの処理の流れ��������������������������������������������������� 135

ホバーエフェクトの CSS�������������������������������������������������������� 101●●

スライドショーの HTML と CSS���������������������������������������������� 136����������������������������������� 102
1 行目のボタンの JavaScript（jQuery）●●

����������������������������������� 137
スライドショーの JavaScript（jQuery）

����������������������������������� 104
2 行目のボタンの JavaScript（jQuery）●

変数の準備�������������������������������������������������������������������������� 138����������������������������������� 105
3 行目のボタンの JavaScript（jQuery）●

スライドショーの実行������������������������������������������������������������ 140

画像とキャプションの表現������������������������������������������ 109

Column JavaScript が無効になっている場合を考慮する�������������������������� 143

05-02

Advanced

多機能なスライドショー����������������������������������� 144●

キャプション表現の HTML����������������������������������������������������� 109����������������������������������������� 110
キャプション表現の CSS（共通部分）●●

スライドショーの概要������������������������������������������������������������ 144

1 つめの画像のキャプション表現 ��������������������������������������������� 111●

スライドショーの HTML�������������������������������������������������������� 145

Column filter() メソッドと find() メソッドの違い���������������������������������� 113●

スライドショーの構造������������������������������������������������������������ 146

2 つめの画像のキャプション表現 ��������������������������������������������� 114●●

スライドショーの CSS����������������������������������������������������������� 147

3 つめの画像のキャプション表現 ��������������������������������������������� 115●●����������������������������������� 150
スライドショーの JavaScript（jQuery）

丸いボタンのレイアウト���������������������������������������������� 118●

変数の準備�������������������������������������������������������������������������� 153●

スライドの配置と、インジケーターの生成・挿入������������������������� 154●

スライドショーを動かす各機能の概要 ��������������������������������������� 156

●

6

●

ホバーエフェクトの HTML����������������������������������������������������� 100

●

04-03

滑らかな動きのスライドショー����������������������� 135

●

●

04-02

133

●

丸いボタンの HTML�������������������������������������������������������������� 118●

丸いボタンの CSS���������������������������������������������������������������� 119●����������������������������������������� 120
丸いボタンの JavaScript（jQuery）

7

Contents●

任意のスライドを表示する関数＿ goToSlide() 関数���������������������� 156●

jQuery UI Tabs の基本的な使い方 ������������������������������������������ 193●

ナビゲーションとインジケーターの●ハイライトの位置を調整する関数＿ moveHighlight() 関数������������ 194

状態を更新する関数＿ updateNav() 関数���������������������������������� 158●

クリックイベントに処理を登録する������������������������������������������ 160●

タイマーの開始と一時停止＿ startTimer() 関数と

05-07

stopTimer() 関数 ����������������������������������������������������������������� 162●

スライドショーの開始������������������������������������������������������������ 163
Column タイマーの仕組み ����������������������������������������������������������� 164

処理の流れ�������������������������������������������������������������������������� 166●

スティッキーヘッダーの HTML と CSS������������������������������������� 166●

 �������������������������� 168
スティッキーヘッダーの JavaScript（jQuery）●

変数の準備�������������������������������������������������������������������������� 169●

ウィンドウのスクロールイベントを監視する処理������������������������� 170●

ウィンドウのスクロールイベントを発生させる処理���������������������� 171

Advanced

スムーズスクロールの HTML と CSS���������������������������������������� 197●

����������������������������� 197
スムーズスクロールの JavaScript（jQuery）●

クリックイベントへの処理の登録��������������������������������������������� 198●

scrollTop プロパティを利用できる要素の検出���������������������������� 199

Advanced

拡張性のあるスムーズスクロール������������������� 200●

スムーズスクロールの仕組み��������������������������������������������������� 200●

スムーズスクロールの HTML と CSS���������������������������������������� 201●

����������������������������� 202
スムーズスクロールの JavaScript（jQuery）

Column 任意のページ内リンクでスムーズスクロールを有効にする方法����������� 202

06

高機能なギャラリーページを作ってみよう！203

06-01

ギャラリーページの全体像������������������������������������������ 204●

スティッキーヘッダーの概要��������������������������������������������������� 173●

スティッキーヘッダーの仕組み������������������������������������������������ 174●

スティッキーヘッダーの HTML と CSS������������������������������������� 174●

 �������������������������� 176
スティッキーヘッダーの JavaScript（jQuery）●

変数の準備�������������������������������������������������������������������������� 177●

ギャラリーページの主な機能��������������������������������������������������� 204●

HTML 要素の挿入����������������������������������������������������������������� 179●

本章の解説の流れ ����������������������������������������������������������������� 205●

ウィンドウがスクロールされた際の処理������������������������������������� 179
Ba s ic

06-02

画面領域を有効活用できるタブ����������������������� 181

Basic

シンプルなギャラリーページの作成��������������� 206●

動作確認に関する注意点��������������������������������������������������������� 206
2 つの JavaScript ライブラリ������������������������������������������������ 206●

タブの仕組み����������������������������������������������������������������������� 181●●

タブの HTML���������������������������������������������������������������������� 182●

ギャラリーページの HTML と CSS������������������������������������������� 208●

タブの CSS������������������������������������������������������������������������� 183●

ギャラリーページの元データの構造������������������������������������������ 209●�������������������������������������������������� 184
タブの JavaScript（jQuery）●

�������������������������������� 211
ギャラリーページの JavaScript（jQuery）●

変数の準備�������������������������������������������������������������������������� 185●

このサンプルの処理対象となる HTML 要素�������������������������������� 212●

タブがクリックされたときの処理��������������������������������������������� 185●

Masonry の準備������������������������������������������������������������������ 212

高機能で拡張しやすいタブ������������������������������� 188●$.getJSON() メソッドによる JSON データの取得���������������������� 213●$.each() メソッドによるループ処理����������������������������������������� 213●

HTML 文字列の生成�������������������������������������������������������������� 215●

Masonry による各要素のレイアウト���������������������������������������� 217

Advanced●●

8

デザインが変化するスティッキーヘッダー����� 173

●

er

●

05-08

スムーズスクロールの仕組み��������������������������������������������������� 196

pt

スティッキーヘッダーの概要��������������������������������������������������� 165

05-05

05-06

スティッキーヘッダー

スムーズスクロール������������������������������������������� 196

●

ha

05-04

Ba s ic
●

C

05-03

���������������������������������������� 165

Basic

タブの仕組み����������������������������������������������������������������������� 188
jQuery UI とは�������������������������������������������������������������������� 189●

タブの HTML���������������������������������������������������������������������� 190●

タブの CSS������������������������������������������������������������������������� 191●

�������������������������������������������������� 192
タブの JavaScript（jQuery）●

変数の準備�������������������������������������������������������������������������� 193

Column JavaScript による文字列の記述方法�������������������������������������� 219

06-03

Advanced

フィルタリング機能を持つ
ギャラリーページの作成����������������������������������� 220
9

Contents●

今回追加する機能の概要��������������������������������������������������������� 220●

画像の読み込み状況の監視とプログレス表示への反映������������������� 255●

関数の分離�������������������������������������������������������������������������� 221●

画像の読み込み状況をプログレス表示に反映する＿ updateProgress()●

Basic 版との主な違い ����������������������������������������������������������� 222●

ギャラリーサイトの HTML����������������������������������������������������� 223●

ギャラリーサイトの CSS�������������������������������������������������������� 224●

ギャラリーサイトの JSON����������������������������������������������������� 225●

ギャラリーを初期化する関数＿ initGallery() 関数������������������������ 226●

アイテム群を生成し、ドキュメントに挿入する関数

関数����������������������������������������������������������������������������������� 256
●

07-02

＿ addItems() 関数��������������������������������������������������������������� 228
Column 正規表現の基本�������������������������������������������������������������� 231

06-04

06-05

●

フィルタリング機能の仕組み��������������������������������������������������� 233●

アイテムのフィルタリング機能＿ filterItems() 関数���������������������� 234●

ラジオボタンのカスタマイズ��������������������������������������������������� 236

Advanced

選択画像の拡大機能とキャプションの追加���� 237

画像シーケンスのアニメーション������������������������������ 260●

画像シーケンスのアニメーションの概要������������������������������������� 260●

アニメーションの仕組み��������������������������������������������������������� 261●

画像シーケンスのアニメーションの HTML��������������������������������� 261●

画像シーケンスのアニメーションの CSS ����������������������������������� 262●

������������ 262
画像シーケンスのアニメーションの JavaScript（jQuery）●

使用する変数の準備��������������������������������������������������������������� 265●

マウスホイールイベントの取得������������������������������������������������ 265●

アニメーションの開始＿ startAnimation() 関数�������������������������� 266●

アニメーションの内容＿ animateSequence() 関数��������������������� 267●

今回追加する機能の概要��������������������������������������������������������� 237●

アニメーションの終了＿ stopAnimation() 関数��������������������������� 269●

Colorbox のダウンロードと読み込み���������������������������������������� 238●

全画面表示�������������������������������������������������������������������������� 269●

Colorbox の実行������������������������������������������������������������������ 238

Advancedマウスの移動方向による
ホバーエフェクト機能の追加��������������������������� 240

07-03	回転のアニメーションによるインフォグラフィック�������������������������������������������������� 272●

インフォグラフィックとは������������������������������������������������������ 272●

今回追加する機能の概要��������������������������������������������������������� 240●

今回のサンプルのポイント������������������������������������������������������ 273●

ホバーエフェクトの HTML����������������������������������������������������� 241●

パイチャートの仕組み������������������������������������������������������������ 273●

ホバーエフェクトの CSS�������������������������������������������������������� 242●

インフォグラフィックの HTML ����������������������������������������������� 274●

�������������������������������� 242
ホバーエフェクトの JavaScript（jQuery）●

インフォグラフィックの CSS�������������������������������������������������� 275●

オーバーレイのアニメーション＿ hoverDirection() 関数�������������� 243●

transform プロパティのアニメーション������������������������������������ 277

Column 通常の関数と即時関数の違い����������������������������������������������� 246●

 �������������������������� 278
インフォグラフィックの JavaScript（jQuery）

マウスの方向を検出する＿ getMouseDirection() 関数����������������� 247●

各チャートの処理－準備��������������������������������������������������������� 279●

各チャートの処理－角度の操作������������������������������������������������ 280●

マスクのアニメーション���������������������������������������������� 284

C

ha

pt

er

07-04

10

jQuery を活用したさまざまな表現

07
07-01

プログレス表示の終了処理������������������������������������������������������ 258

249

画像の読み込みのプログレス表示機能���������������������� 251●

プログレス表示機能の概要������������������������������������������������������ 251●

プログレス表示に必要な処理��������������������������������������������������� 252●

プログレス表示の HTML と CSS���������������������������������������������� 252●����������������������������������� 253
プログレス表示の JavaScript（jQuery）●

表示に必要な要素を jQuery オブジェクト化������������������������������� 254●

今回のサンプルの仕組み��������������������������������������������������������� 284●

マスクのアニメーションの HTML�������������������������������������������� 285●

マスクのアニメーションの CSS����������������������������������������������� 286●

animate() メソッドで CSS の clip プロパティを操作する方法�������� 287●

������������������������ 287
マスクのアニメーションの JavaScript（jQuery）●

マスクのアニメーション��������������������������������������������������������� 29011

jQuery リファレンス

Appendix

291●

Core －コア������������������������������������������������������������������������ 292●

Selectors －セレクタ ����������������������������������������������������������� 293●

Traversing －検索��������������������������������������������������������������� 296●

Attributes/CSS －属性と CSS����������������������������������������������� 298●

Manipulation －操作������������������������������������������������������������� 300●

Events －イベント��������������������������������������������������������������� 303●

Effects －エフェクト������������������������������������������������������������ 304●

Ajax���������������������������������������������������������������������������������� 305●

Utilities －ユーティリティ������������������������������������������������������ 306●

本書で使用している外部ファイル��������������������������������������������� 307●

Normalize.css�������������������������������������������������������������������� 307●

Modernizr�������������������������������������������������������������������������� 308●

HTML5 Shiv����������������������������������������������������������������������� 309

索引������������������������������������������������������������������������������������� 311

12

02-01 体験することからはじめよう！﻿

ha
p

te

r

02

Chapter 02 3 ステップではじめるかんたん jQuery 入門

C01

体験することからはじめよう！

index.html をテキストエディタなどで開き、内容を確認しておきましょう。
html サンプルファイルの HTML

前章でも触れましたが、jQuery はとてもシンプルな JavaScript ライブラリであるため、初心者の方でも要点さえ理解すればすぐに使用できるようになります。しかしその反面、多機能でもあるため、基礎知識がない状態で膨大なリファレンスを先頭から読み進めたり、Web 上に散らばっている断片的な情報を拾い読みする方法だけでは、「何をどう使えば良いのか」、「何から覚えたら良いのか」がわかりにくいという一面もあります。初心者の方が効率良く jQuery を習得するためには、適切な順番で jQuery の機能や使用方法を学んでいくことが必要です。そこで、まず は 以 下 の 3 つ の ス テ ッ プ で 実 際 に 手 を 動 か し な が ら、jQuery の 基 礎 と そ れ に 関 連 す る

JavaScript の基礎を学んでいきましょう。
STEP 1CSS のスタイルを変更してみよう

STEP 2タイミングをコントロールしてみよう

STEP 3

アニメーションさせてみよう

この 3 つのステップではいずれもシンプルな機能しか利用しませんが、これらは jQuery における「見た目の表現」に関する基礎となります。そのため、読み進めていくと表現の幅が広がっていく感覚を実感できると思います。

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Creative jQuery</title><link rel="stylesheet" href="./css/normalize.css"><link rel="stylesheet" href="./css/main.css"><script src="./js/vendor/jquery-1.10.2.min.js"></script><script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script><script src="./js/main.js"></script></head><body>

index.html

❶
●

❷
●

<header class="page-header" role="banner"><h1>Creative jQuery Sample</h1></header><div class="page-main" role="main"><div id="typo"><div class="inner">Creative jQuery</div></div></div>

Chapter

01

Chapter02

Chapter

03

Chapter04

Chapter05

Chapter

サンプルファイルについて
本章では、前節でダウンロードした本書のサンプルファイルのうち、［Chapter02］フォルダ
内のファイルを使用します。フォルダ内の index.html をブラウザで開くと以下のようなシン
プルなページが表示されます。

<footer class="page-footer" role="contentinfo"><small class="copyright">COPYRIGHT &copy;<a href="http://www.shiftbrain.co.jp" target="_blank">
SHIFTBRAIN Inc.</a></small></footer>

06

Chapter

07

Appendix</body></html>Fig index.html

head 要素内で複数の CSS ファイルを読み込んでいますが❶、normalize.css はクロスブ

ラウザ対応のためのファイルです。このファイルについては P.307 を参照してください。本章を読み進めるうえでは特に詳細を把握しておく必要はありません。
また、3 つの JavaScript ファイルを読み込んでいますが❷、これらのうち、本章でみなさんが使用するのは main.js のみです＊ 1。main.js は、みなさんが本書を読み進めながらプログ
ラムを記述していくために用意した空のファイルです（何も記述されていません）。

＊１main.js よりも先に（上部で）読み込んでいる 2 つのファイルは、jQuery のファイルと jQuery の拡張ライブラリである「jQuery
UI」です。jQuery UI については、これを使用するタイミングで別途説明します。

36

37

02-02 CSS のスタイルを変更してみよう

C

ha
p

te

r

02

Chapter 02 3 ステップではじめるかんたん jQuery 入門

本章の解説の流れ
本章では、基本的に以下の流れで解説を進めていきます。
（１）main.js をエディタで編集する

CSS のスタイルを変更してみよう

まずは、jQuery を使用して CSS のスタイルを変更してみます。
main.js をエディタで開き、以下のコードを追加してください。この段階ではコードの意味（２）編集後にブラウザで開き、動作確認を行う

書籍を読むだけ、サンプルを見るだけではなかなか身につきません。そのため、本章のmain.js は、あえて空っぽの状態でスタートします。入力するのが面倒だと感じる方もいるかもしれませんがそれがプログラムというものです。きちんと技術を身につけるためにも、実際に手を動かしてプログラムを書いていくことをお勧めします。それでははじめましょう！

Point!

02

STEP 1

本章のサンプルファイルの対応ブラウザ

本章のサンプルについては、IE8 などの古いブラウザではサポートされていない CSS プロパ
ティが一部に含まれています。そのため、動作を確認する際はなるべく新しいブラウザを使用してください。なお、5 章以降で解説するサンプルでは一部の古いブラウザにも対応しています。

を理解する必要はありません。後で詳しく解説します。
JavaScript CSS のスタイルの変更（#typo の要素の変更）


main.js$(function(){$('#typo').css('color', '#ebc000');});

上記のコードを追加したら main.js を保存して、ブラウザをリロードします。すると下図のように #typo の要素の文字色が変わります＊ 1。

Chapter

01

Chapter02

Fig 「CreativejQuery」と書かれた箇所の変更

Chapter

03

Chapter04

ColumnChapter05

Chapter

JavaScript の記述場所

06

Chapter

07

JavaScript は、HTML 内に直接記述する方法と外部ファイルに記述して読み込む方法があります

Appendixが、本書では外部ファイル（main.js）に記述して読み込む方法を採用しています。
HTML に記述する方法は手軽ではあるのですが、HTML と JavaScript が 1 つのファイル

コードの解説にまとまってしまうため、Web サイトが複雑になればなるほど、管理性や更新性が損なわれてしまいます。現在では外部ファイルに記述して読み込む方法が一般的に採用されています。
なお、外部ファイルに記述して読み込む方法の場合は、js ファイルの読み込む順番に注意が必要です。上記では、jQuery の js ファイルを先に読み込んでから、main.js を読み込んでいるのがわかると思います。このように、先に jQuery を読み込んでおかないと、main.js

それでは先ほど追加したコードの内容を見ていきましょう。理解しやすいようにコードを以下の 2 つのパートに分けます。

のプログラムから jQuery を使用することはできません（エラーになります）。
JavaScript 1 つめのパート

main.js$(function(){//2つめのパートが記述されている
});

＊１

38

#typo の要素が変化しない場合は、記述ミスをしている可能性があります。ブラウザの開発者ツールを起動してコンソールを確認してみましょう（P.32）。

39

02-02 CSS のスタイルを変更してみよう﻿

Chapter 02 3 ステップではじめるかんたん jQuery 入門

JavaScript 2 つめのパート

main.js

上記のコードを保存してブラウザをリロードすると以下のようになります。

$('#typo').css('color', '#ebc000');

1 つめのパートのコードの意味は後で説明します（⇒ P.46）＊ 2。ここでは 2 つめのパートを見て

Fig 変更例①の表示ください。CSS をご存じの方であれば、コードの細かい意味はわからなくても、どのような処理をしているのか想像できたのではないでしょうか。このコードの内容は以下の通りです。
Fig スタイルを変更するコードの内容$('セレクタ').css('プロパティ ', '値');
このように、CSS3 プロパティである transform プロパティの rotate() 関数も問題なく使Table 書き換え可能な箇所

用できます＊ 5。

要素

説明

セレクタ

ここには CSS と同じセレクタを指定できる。サポートされていないものも多少あるが、特定の要素を指定するのに困ることはない

プロパティ

CSS のプロパティを指定する

もう 1 つ例を見てみましょう。
Chapter

値

JavaScript 変更例② 

プロパティに設定する値を指定する

つまり、このコードは「“セレクタ”に該当する要素の CSS の“プロパティ”を“値”に変更する 」という処理を行います。そうです、CSS の知識をそのまま使用できるのです＊ 3。世の中のインタ
ラクティブな動きのある Web サイトは、基本的にはこのように「JavaScript で CSS を随時書き替える」ことで実現されています＊ 4。このコードはそのほんの入口ですが、とても重要です。

Chapter

02$(function(){$('.page-main > div:nth-child(1) .inner').css('opacity', 0.5);});

Chapter

03

Chapter04

上記では無意味に長いセレクタで［変更例①］と同じ #typo .inner を選択しています。ご覧の通り、jQuery は古いブラウザでは使えない :nth-child() などの CSS3 セレクタにも対応しています。ここでは opacity（要素の不透明度）を 0.5（50%）に指定しています

＊6

。上記

のコードを保存してブラウザをリロードすると以下のようになります。

サンプルコードを書き替えてみよう！

01

main.js

Chapter05

Chapter

06

Chapter

07

Appendix

Fig 変更例②の表示

本章のサンプルは HTML の要素が少ないため、あまりいろいろな実験はできませんが、ここで実際に以下のような感じでセレクタやプロパティ、値を自由に書き替えてみてください。

HTML 内の各要素を jQuery で操作できることがわかります。
JavaScript 変更例①

main.js$(function(){$('#typo .inner').css('transform', 'rotate(10deg)');
});

＊2
＊3
＊4

40

1 つめのパートのコードにはコメントアウトが含まれています。// 以降の文字列は行末までコメントアウトされます。複数行のコメントアウトは CSS と同じ /* 《コメント》 */ です。
jQuery では、該当する各要素の style 属性の情報を書き換えることで CSS を適用します。そのため、CSS で「!important」
を使用している項目は、その設定が優先されるので注意してください。
Flash や CSS3、canvas などによる表現は除きます。

＊5

transform プロパティには通常はベンダープレフィックスが必要ですが（執筆時点）、プロパティのベンダープレフィックス
は jQuery が自動的に付加してくれます。ただし、「値」にベンダープレフィックスが必要な場合は付加した文字列を渡す必要があります。
＊ 6 IE8 以下では、opacity（不透明度）の指定方法が異なりますが、jQuery が自動的に差異を吸収してくれるので統一的に「opacity」と 0 〜 1 の数値で指定できます。

41

02-02 CSS のスタイルを変更してみよう﻿

Chapter 02 3 ステップではじめるかんたん jQuery 入門

Column

命令の内容：jQuery メソッドと引数

数値と文字列の違いに注意する

まずは命令の内容の部分を見てみます。

上記でいくつかの指定例を示しましたが、値の指定方法が 2 通りあることに気づいたでしょうか。最初の例では「css('color', '#ebc000')」のように値を「'」（シングルクォーテーション）で囲っていますが、2 つめの例では「css('opacity', 0.5)」のように直接数値を

JavaScript 命令の内容

main.jscss('color', '#ebc000');

指定しています。これらの見た目はそれほど変わりませんが、プログラム的には大きく異なるので注意してください。

コードの解説で触れた通り、css() では「()」（カッコ）の中に記述した 'color' が CSS の

jQuery では「'」や「"」には以下のような役割があります。

プ ロ パ テ ィ、'#ebc000' が そ の プ ロ パ テ ィ の 値 に 相 当 し、「CSS の color プ ロ パ テ ィ に

重 要 「'」（シングルクォーテーション）または「"」（ダブルクォーテーション）で囲まれた箇

所は文字列として認識されます。そのため文字列以外、例えば数値を指定する場合は「'」や「"」で囲まずに値を指定することが必要です。

#ebc000 を指定せよ」という命令であることがわかります。

この css() という命令は、JavaScript に定義されている命令ではなく、jQuery 独自の命令です。jQuery の js ファイルの中に css() という命令が定義されており、その命令を main.js

JavaScript はとても寛容なプログラム言語なので、数値を指定すべき箇所に「'」を記述して指定しても（文字列を指定しても）自動的に数値に変換して処理してくれる場合があるので、
必ずしもエラーになるわけではありませんが、エラーになる場合もあるので、なるべく上記のルールを守り、数値を指定すべきところには数値を指定し、文字列を指定すべきところには文字列を指定するように心がけてください。

から利用しています。このような jQuery 独自の命令のことを「jQuery メソッド」と呼びます（以降は「メソッド」と記述します）。

Chapter

また、css() の「()」の中に記述した CSS プロパティや値のように、メソッドに引き渡されるデータを「引数」と呼びます＊ 7。

01

Chapter02

Chapter03

まずは、上記のコードが jQuery のメソッド（css()）と 2 つの引数（'color', '#222'）で構

Chapter

成されているということを把握しておいてください。

04

Chapter05

Fig スタイルを変更するコードの内容

jQuery の最も基本的な構文の解説
CSS のスタイルを変更する方法が何となくわかった所で、コードの内容をもう少し掘り下げ

Chapter06.css('color', '#222');

Chapter

jQueryメソッド

Appendix

07

2つの引数

て見ていきます。ここからは少しボリュームがありますが、少しずつ理解を深めていきましょう。
まずは先ほどパート分けした 2 つめのパートを使用して、jQuery の基本的な構文と考え方を解

命令の対象：$() 関数と jQuery オブジェクト説します。

さてここで css() というメソッドの「命令の対象」になっているのは「id="typo" が指定されてJavaScript 2 つめのパート

main.js$('#typo').css('color', '#ebc000');

いる HTML 要素 」ですが、jQuery では HTML 要素に対して直接 css() メソッドを実行することはできません。メソッドを使用するためには、jQuery 独自の形式で命令の対象を指定することが必要です。それが以下の部分になります。

こ れ を jQuery 的 に 解 釈 す る と「$('#typo') と い う モ ノ（ 命 令 の 対 象 ）に 対 し て、css('color', '#ebc000') という命令を指示している（命令の内容 ）」と捉えることができます。

JavaScript 命令の対象部分

なぜこのような解釈になるのでしょうか。1 つずつ見ていきましょう。

$('#typo')＊742main.js

メソッドに引数を指定することを「引数を渡す」といい、メソッドを実行することを「メソッドを呼ぶ（呼び出す）」といいます。

43

02-02 CSS のスタイルを変更してみよう

Chapter 02 3 ステップではじめるかんたん jQuery 入門$() と CSS のセレクタ（上記では '#typo'）の関係は、先述した css() メソッドと引数（CSS

プロパティおよび値）の関係と同じです。セレクタは $() の引数として渡されています。

</body>//省略

Fig 命令対象の内容$('#typo');関数

他の例を挙げると、例えば「$('h1')」を指定した場合は、以下の要素が jQuery オブジェク
トに変換され、これが命令の対象になります❷。

1つの引数$() は「HTML 要素をもとにして jQuery 独自の要素を生成する」という機能を持っている関数です。HTML 要素を指定する方法として、CSS のセレクタを指定できます。この $() 関数によって jQuery の形式に変換された要素のことを「jQuery オブジェクト」と呼びます。

Point!

</footer>

html jQuery オブジェクトとして変換される要素（コード内の赤字の箇所）
//省略<body><header class="page-header" role="banner"><h1>Creative jQuery Sample</h1></header>メソッドと関数

index.html❷●<div class="page-main" role="main">//省略$() と css() は、引数を伴うという意味では類似していますが、$() はメソッドとはいわ

Chapter

01

Chapter

ず、「関数」といいます。この辺りが少しややこしいのですが、現時点では、命令文の前に「.」02（ドット）がついているものは「メソッド」、ついていないものは「関数」だと理解しておいてください。

Chapter03

Fig HTML 要素と jQuery オブジェクトの関係

Chapter04

今回使用したコードを用いて解説すると、「$('#typo')」の指定によって index.html 内のHTMLファイル

全 HTML のうち、以下の赤字の箇所の要素のみが jQuery オブジェクトに変換されます❶。こ

要素 Aのことから「$('#typo')」に続いて指定されているメソッドは、この jQuery オブジェクトに
要素 B

対して実行されると理解できます。

jsファイル

Chapter05

Chapter

06

jQueryオブジェクト

$(

要素 B

)

変更

index.html
要素 D

//省略
<body>

要素 E<header class="page-header" role="banner"><h1>Creative jQuery Sample</h1></header><div class="page-main" role="main"><div id="typo"><div class="inner">Creative jQuery</div></div></div>

07

Appendix

要素 C
html jQuery オブジェクトとして変換される要素（コード内の赤字の箇所）
Chapter

jQueryオブジェクト

$(

要素 E

)

変更

要素 F

❶
●

また、処理の流れも基本的に以下の通りです。
（１）$() 関数で命令の対象となる HTML 要素を jQuery オブジェクトに変換し、（２）その jQuery オブジェクトに対してメソッドを呼び出して変更を加える<footer class="page-footer" role="contentinfo"><small class="copyright">COPYRIGHT &copy;<a href="http://www.shiftbrain.co.jp" target="_blank">
SHIFTBRAIN Inc.</a></small>jQuery には、css() メソッド以外にも、たくさんのメソッドが用意されていますが、どのメソッドの場合でもこの流れは変わりません。これが jQuery の基本です。ここで登場した各用語の関係は次の図のように表されます。これらが jQuery において最も重要な登場人物になります
ので、しっかりと関係性を把握しておいてください。

4445

02-02 CSS のスタイルを変更してみよう﻿

Chapter 02 3 ステップではじめるかんたん jQuery 入門

Fig 主な登場人物の関係図

html サンプルの HTMLjQueryオブジェクト$(

HTML要素<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Creative jQuery</title><link rel="stylesheet" href="./css/normalize.css"><link rel="stylesheet" href="./css/main.css">

変更する命令).

メソッド

index.html(' 引数1 ',' 引数2 ')「.（」ドット）と「;（」セミコロン）の役割
今回解説に使用しているコードでは、$() 関数（jQuery オブジェクト）に続けて css() メソッ（ドット）には jQuery オブジェク
ドが指定されていました。この関数とメソッドの間にある「.」トと jQuery メソッドをつなぐ役割があります。

（セミコロン）は、JavaScript の「文」の終わりを表す記号です。日本語の文
また、行末の「;」における「。」にあたるものです。いくつかの例外もあるのですが、現時点では JavaScript の 1つの命令が終わったら「;」をつけると覚えておいてください。

<script src="./js/vendor/jquery-1.10.2.min.js"></script><script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script><script src="./js/main.js"></script>❶●</head><body>//省略</body></html>Chapter

01

ChapterFig 「.」（ドット）と「;」（セミコロン）の役割

ブラウザは基本的に、HTML を「コードが記述された順番通り」に処理していきます。つまりブラ ウ ザ は、1 行 目 に あ る <!DOCTYPE html> か ら 順 に、html 要 素、head 要 素、<meta$(

HTML要素).

メソッド(' 引数1 ',' 引数2 ')；charset="UTF-8">…という順で認識していきます。

そして、このブラウザの処理が <script src="./js/main.js"></script> の部分に到
jQueryオブジェクトとメソッドをつなぐ役割

JavaScriptの処理が終わったことを示す役割

達すると、ブラウザは main.js を読み込みます❶。そして、main.js の読み込みが完了するとその内容をすぐに実行します。

02

Chapter

03

Chapter04

Chapter05

Chapter

06

Chapter07

この際、main.js にはその後に続く HTML の要素を操作する命令が書かれています。しかしブラウザはこの時点ではまだ head 要素の途中までしか認識していないため（それ以降の要素はHTML の準備が整うのを待つ仕組み

Appendix

まだ認識していないため）、処理を実行することができません。
この問題を解決するための仕組みが、1 つめのパートにあります。以下のように $(function(){ }); を記述すると、ブラウザはその中に記述された処理をいったん 予約状態 にしておき、

さて、後に回していたサンプルコードの 1 つめのパートについて解説します。
JavaScript 1 つめのパート

HTML を最後まで読み込んだ時点でそれらを実行するようになります。
main.js$(function(){//2つめのパートが記述されている});

このコードの役割を確認するために、1 つめのパートだけを削除した状態でブラウザをリロードしてみてください。するとスクリプトが動作していない ことが確認できるはずです。なぜこうなってしまうのでしょうか。これには HTML の構造が関係しています。
もう一度サンプルの index.html のコードを見てみましょう。

46

JavaScript ブラウザが HTML を最後まで読み込むのを待つための仕組み$(function(){//HTMLがロードした後に実行する処理});

jQuery を利用したプログラムでは、最初に HTML の要素を選択することがとても多いため、ほぼすべてのコードが上記のような構成になります。本書でもすべてのサンプルにこのコードが記述されています。

47

Chapter 02 3 ステップではじめるかんたん jQuery 入門

ここまでのまとめここでいったんこれまでの解説を振り返ってみます。これまでの解説で以下のことを学びました。これらの内容はすべて jQuery の最も基本的な項目であり、いずれもとても重要です。現時点では概要的な内容しか解説していない箇所もありますが、しっかりと理解してから次に進んでください。
●

jQuery で CSS のスタイルを変更する方法●

数値と文字列の違い●

jQuery メソッドや $() 関数、jQuery オブジェクトの概要と関係性

●

●

「.」
（ドット）と「;」（セミコロン）の役割
HTML の準備が整うのを待つ仕組み

これらについてきちんと理解できているか振り返ってみてください。なお、次項の解説も上記と同様に以下の流れで学習していきます。
（１）main.js にサンプルコードを記述する（２）ブラウザで index.html の表示内容を確認する（３）記述したサンプルコードの解説（４）コードを自由に書き替えてみる（５）ブラウザで index.html の表示内容を確認する（６）サンプルコードを使用した jQuery の基本解説

48