概要

Webデザイナー養成講座シリーズは，プロのデザイナーとして仕事をするうえで，必須のスキルを身につけるためのシリーズです。本書では，jQueryをこれから学習する初級者のために，jQueryについての基本的な知識，記述方法，具体的な利用例などを解説します。「JavaScriptを知らなくてもコードの書き換えだけでjQueryが使える」「実際のWebサイト制作に使えるコードを多数紹介」「かんたんな文法解説も行うので，コードの内容もよくわかる」「仕事で使える知識であることを意識した内容とする」といった点が特徴です。

こんな方におすすめ

• HTML，CSSは習得済みで，次にjQueryを学びたい人
• プロのWebデザイナーを目指す人

目次

CHAPTER1　jQueryについて

• 1-01　jQueryとは
• 1-02　jQueryのインストール
• 1-03　jQueryのバージョンによる違い
• 1-04　jQueryの基本構文

CHAPTER2　jQuery を使うための基礎知識

• 2-01　セレクタとは
• 2-02　セレクタの選択
• 2-03　関数とメソッド
• 2-04　HTMLの操作
• 2-05　CSSの操作
• 2-06　イベントとは
• 2-07　readyイベントについて
• コラム　プリミティブ型とオブジェクト型

CHAPTER3　アニメーション

• 3-01　［アニメーション］フェードイン／フェードアウト
• 3-02　［アニメーション］スライド（座標移動）
• 3-03　［アニメーション］コマアニメーション
• 3-04　［メインビジュアル］画像の自動切り替え
• 3-05　［メインビジュアル］サムネイル画像のクリックによる画像の切り替え
• 3-06　［メインビジュアル］ボタンのクリックによる画像の切り替え
• 3-07　［メインビジュアル］複数機能による画像の切り替え
• コラム　変数について

CHAPTER4　メニュー

• 4-01　［メニュー］アコーディオンメニュー
• 4-02　［メニュー］プルダウンメニュー
• 4-03　［メニュー］エレベーターメニュー
• 4-04　［マウスオーバー］画像の切り替え
• 4-05　［マウスオーバー］画像のアルファ（透明度）の変更
• 4-06　［マウスオーバー］2枚の画像をクロスフェードで切り替え
• コラム　関数について

CHAPTER5　フォーム

• 5-01　［フォーム］テキストやテキストエリアの未入力チェック
• 5-02　［フォーム］正規表現による入力フォーマットチェック
• 5-03　［フォーム］テキストやテキストエリアのリアルタイム入力チェック
• 5-04　［フォーム］チェックボックスやセレクトの未入力チェック
• 5-05　［フォーム］submitボタンの制御
• 5-06　［フォーム］入力内容をCookieに保存
• 5-07　［フォーム］プレースホルダ
• コラム　オブジェクトについて

CHAPTER6　テキスト

• 6-01　［テキスト］テキストティッカー
• 6-02　［テキスト］自動カーニング
• 6-03　［テキスト］タイピング風に1 文字ずつ表示
• 6-04　［テキスト］シャッフル表示
• コラム　セレクタについて

CHAPTER7　画像表示

• 7-01　［画像表示］大量の画像の読み込み
• 7-02　［画像表示］画像の読み込み中にローディング画像を配置
• 7-03　［画像表示］画像の読み込み中にローディングバーを配置
• 7-04　［画像表示］ローディングバーにパーセンテージを表示
• 7-05　［画像表示］画像の外部読み込み（JSON形式）
• 7-06　［画像表示］画像の外部読み込み（XML形式）
• 7-07　［画像表示］読み込みが完了した画像から順に表示
• コラム　jQueryのプラグインについて①

CHAPTER8　モーダルウィンドウ

• 8-01　［モーダルウィンドウ］画像の表示
• 8-02　［モーダルウィンドウ］画像の切り替え
• 8-03　［モーダルウィンドウ］画像のグループ化
• 8-04　［モーダルウィンドウ］iframe を使用した外部HTML の埋め込み
• 8-05　［モーダルウィンドウ］同ファイル内のHTML 要素を表示
• コラム　jQueryのプラグインについて②

CHAPTER9　レスポンシブ

• 9-01　［スライドショー］レスポンシブ対応されたスライドショー
• 9-02　［スライドショー］フリックによる画像スライド機能を追加したスライドショー
• コラム　jQueryのプラグインについて③

CHAPTER10　外部サービスとの連携

• 10-01　［Facebook］タイムラインの写真を読み込む
• 10-02　［Facebook］モーダルウィンドウを追加する
• 10-03　［YouTube］プレーヤーの埋め込み
• 10-04　［YouTube］再生する動画を切り替える
• コラム　さらなるスキルアップのために

サポート

ダウンロード

本書のサンプルファイルをダウンロードすることができます。データはZIP形式で圧縮されています。ファイルをダウンロード後，適宜展開してご利用ください。詳しい使い方は，本書のP.010を参照してください。

ダウンロード

jQuery_sample.zip　（38.6MB）

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに，読者の皆様に深くお詫び申し上げます。

（2016年1月15日更新）

P.68　6行目

P.70　main.jsの4行目

var intervalID;

var intervalId;

（サンプルプログラムは合っています）

10-01，10-02

FacebookのAPI変更により，プログラムが動作しなくなってしまいました。
データの取得にアクセストークンが必要になったことと，アクセストークンに有効期限があるためサンプルの提供が行えません。
大変申し訳ありませんが，この2節はSNSのAPIを利用してjQueryでWebページに表示する例としてお読みください。