Webデザイナー養成講座シリーズjQuery 仕事の現場でサッと使える! デザイン教科書

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

B5判/336ページ

定価(本体2,780円+税)

ISBN 978-4-7741-7273-6

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

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]再生する動画を切り替える
  • コラム さらなるスキルアップのために