書籍概要

Webデザイナー養成講座

jQuery 仕事の現場でサッと使える! デザイン教科書

著者
発売日
更新日

概要

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行目

~値に374が指定されていますので、左から374pxの地点まで移動します。
~値に356が指定されていますので、左から356pxの地点まで移動します

P.70 main.jsの4行目

var intervalID;
var intervalId;

(サンプルプログラムは合っています)

10-01,10-02

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

商品一覧