jQuery 標準デザイン講座(ジェイクエリ ヒョウジュン デザイン コウザ)

作って身につく・仕組みがわかる 30 レッスン!

本書は、 HTML と CSS の知識はあっても JavaScript や jQuery には触れたことがない初心者を対象にした、 Web 制作向けの jQuery 学習書です。全 30LESSON を通して、 jQuery の基礎知識と基本文法の学習から始めて、実際に動作サンプルを作りながら、 jQuery のしくみと使い方を学んでいきます。

各 LESSON は、考え方や設計を説明する「講義」と、実際にコードを書いて作っていく「実習」で構成。メニューやナビゲーション、 UI パーツなど、 Web サイトでよく使われているサンプル作例を自分で作りながら、「使える」知識がきちんと身につきます。

サンプル作例は小さなパーツから始めて、少しずつ複合的なパーツを作っていく難度順なので、プログラミングになじみのない初心者でも挫折せずに進められます。 Web 制作者を目指す人や、スキルアップしたい Web デザイナーのための jQuery 教科書としておすすめの 1 冊です!

Introduction レッスンを始める前に

Chapter01 jQuery の基礎知識
LESSON01 jQuery の概要
LESSON02 jQuery の導入

Chapter 02 jQuery の文法
LESSON03 jQuery の文法
LESSON04 JavaScript の基本

Chapter 03 jQuery のサンプル制作:Level 1
LESSON05 トグルメニュー
LESSON06 アラートボックス
LESSON07 ビューアー
LESSON08 タブ

Chapter 04 jQuery のサンプル制作:Level 2
LESSON09 ドロップダウンメニュー
LESSON10 フローティングメニュー
LESSON11 lightBox 風モーダルウインドウ
LESSON12 画像のキャプション表示
LESSON13 ツールチップ

Chapter 05 jQuery のサンプル制作:Level 3
LESSON14 ボックスの高さを合わせる
LESSON15 文字サイズの変更
LESSON16 パララックス効果
LESSON17 フィルタリング
LESSON18 テーブルセルのハイライト
LESSON19 アコーディオンパネル
LESSON20 スムーススクロール

Chapter 06 jQuery のサンプル制作:Level 4
LESSON21 バナーのランダム表示
LESSON22 フォームのバリデーション
LESSON23 スライドメニュー
LESSON24 スクロールによるヘッダーのリサイズ
LESSON25 ブラウザ上部に固定されるヘッダー
LESSON26 メニューのハイライト

Chapter 07 jQuery のサンプル制作:Level 5
LESSON27 スライドショー (横スクロール)
LESSON28 スライドショー (フェードイン／アウト)
LESSON29 画像のズーム
LESSON30 カウントアップゲーム

［補講］ プラグインの利用
索引

jQuery は DOM 操作やアニメーションを簡潔に書ける JavaScript ライブラリとして、 Web 制作の現場で長く使われてきました。本書は神田幸恵が、セレクタの基本・イベント処理・アニメーション・ Ajax といった jQuery の中核機能を、制作現場で実際に使うパターンに沿って解説する入門書です。サンプルを写経しながら「スライドショー」「アコーディオンメニュー」「スムーズスクロール」といった定番の UI を組み立てていく構成になっています。

素の JavaScript に不慣れなデザイナーやコーダーが、動きのある Web ページをまず形にする体験を得るには適した一冊です。ただし、 2014 年刊行のため ES6 以降の JavaScript や、 React ・ Vue といったコンポーネント指向のフレームワークには触れていません。 jQuery 自体を使っている既存プロジェクトの保守や、素の DOM 操作の感覚を掴む目的では依然として役立ちますが、新規開発でフレームワークを選定する段階にいる人は、本書の後にモダンな JavaScript の入門書を併読する必要があります。