作りながら学ぶjQueryデザインの教科書

第1章　jQueryの基本

01-06 jQueryトレーニング(その1)~ jQueryを読み込む~

• Step1 jQueryライブラリを読み込む

01-07 jQueryトレーニング(その2)~スクリプトを試しに書いてみる~

• Step1 要素セレクタを使用して<p>を取得する
• Step2 DOMの生成を待つ
• Step3 イベントハンドラを設定する
• Step4 クリックした要素にだけ処理を実行する

01-08 jQueryトレーニング(その3)~要素を取得する~

• Step1 要素セレクタで要素を取得する
• Step2 idセレクタで要素を取得する
• Step3 クラスセレクタで要素を取得する
• Step4 子孫セレクタで要素を取得する
• Step5 :nth-child(n)セレクタで要素を取得する
• Step6 属性セレクタで要素を取得する
• Step7 複数のセレクタを使用する

01-09 jQueryトレーニング(その4)~イベントハンドラを設定する~

• Step1 コメントを記述する
• Step2 マウスオーバーしたらアウトラインを付ける
• Step3 マウスアウトしたらアウトラインを外す
• Step4 テキストフィールドにフォーカスが当たったら背景色を変更する

01-10 jQueryトレーニング(その5)~トラバースで要素を取得する~

• Step1 テーブルのセルを取得する
• Step2 条件にマッチした直近の祖先要素を取得する
• Step3 変数を使う
• Step4 親要素をすべて取得する・条件に合うものだけ選別する
• Step5 兄弟要素を取得する

01-11 jQueryトレーニング(その6)~要素を操作する~

• Step1 クリックしたリスト項目の内容を書き替える
• Step2 クリックした回数を保持する
• Step3 要素を追加する

第2章　ページのデザインに役立つUIの作成

02-01 開閉するボックス

• Step1 基本的な動作を作成する
• Step2 ボックスの開閉にアニメーションを付ける
• Step3 アニメーションの演出を変える

02-02 レスポンシブなナビゲーション

• Step1 狭いウィンドウ幅のときにだけ表示されるリンクを作成する
• Step2 動作の不具合を修正する

02-03 コンテンツを切り換えるタブ

• Step1 タブボタンの動作を実装する
• Step2 <a>のデフォルトの動作を抑制する
• Step3 デリゲートを使用する
• Step4 表示するコンテンツを切り換える

02-04 簡易的なイメージギャラリー

• Step1 サムネイルの動作を実装する
• Step2 メイン画像を切り換える
• Step3 メイン画像をプリロードする(1) ~関数を定義する~
• Step4 メイン画像をプリロードする(2) ~関数を呼び出す~
• JavaScript Note 関数(function)の基礎

第3章　動きのあるコンテンツを作成する

03-01 アコーディオン

• Step1 リンクをクリックしたらコンテンツが開く動作を作成する
• Step2 アコーディオンの動作を実装する
• カスタマイズのポイント コンテンツには画像も使えて、複雑なレイアウトにもできる

03-02 ドロップダウンメニュー

• Step1 ドロップダウンメニューの最低限の機能とデザインを作成する
• Step2 ボタン以外の場所をクリックしたときにもメニューを閉じる(1)
• Step3 ボタン以外の場所がクリックされたときにもメニューを閉じる(2)
• JavaScript Note イベントプロパゲーション
• Step4 より汎用的なドロップダウンメニューにする
• カスタマイズのポイント 複数のドロップダウンメニューを組み込むには

03-03 CSSを操作するアニメーション

• Step1 CSSプロパティを直接操作する
• Step2 addClass()/removeClass()を使用する

03-04 連続アニメーション

• Step1 animate()を使用する
• Step2 animate()で連続的なアニメーションを作る

03-05 高度なアニメーションテクニック

• Step1 mouseenterとmouseleaveイベントの処理を1つにまとめる
• Step2 animate()の2番目のパラメータをオブジェクトにする
• Step3 不透明度の変化に合わせて画像を回転させる
• CSS Note 要素のコンテンツを変形するtransform
• カスタマイズのポイント スマートフォンでアニメーションをしないようにするには

03-06 スライドショー

• Step1 ボタンがクリックされた関数を呼び出す
• Step2 画像を切り換える
• Step3 一定時間で次の写真を表示する
• Step4 ほかのスクリプトへの影響を排除する

03-07 Ajaxの基礎

• Step1 データを取得する
• Step2 読み込んだデータを表示する
• Step3 毎回違うデータを読み込む

第4章　Webページ全体を制御する

04-01 モーダルウィンドウ

• Step1 ウィンドウを開閉する
• Step2 モーダルウィンドウをブラウザウィンドウの中央に表示する
• Step3 シェードを付ける
• Step4 closeボタンを追加する

04-02 ウィンドウ上端で固定するグローバルナビゲーション

• Step1 スクロール位置を取得する
• Step2 カスタムイベントを発生させる
• Step3 グローバルナビゲーションを固定する
• Step4 ナビゲーションが固定されたときの動作を改善する

04-03 指定位置で固定するサイドバー

• Step1 サイドバーに適用してみる
• Step2 固定位置をずらす
• Step3 スマートフォンのときにはサイドバーの固定を止める

04-04 スクロールするページ内リンク

• Step1 ページ内のリンク先までスクロールする
• Step2 スクロールする位置を指定する

04-05 スクロールしてページトップへ戻るリンク

• Step1 ページトップへ移動するリンクを作成する

04-06 スクロール位置に合わせたリンクのハイライト

• Step1 基本機能を実装する
• Step2 ブラウザの動作の違いを吸収する

第5章　データからページを生成する

05-01 JSONデータの取得

• Step1 データを読み込む
• Step2 エラーを表示する

05-02 データからテーブルを生成

• Step1 基本的なテーブルを生成して表示する
• Step2 モバイル端末向けのレイアウトを作成する

05-03 データによるアイコン画像の切り換え

• Step1 データに応じて画像を切り換える

05-04 データのフィルタ処理

• Step1 フィルタ用のボタンを作成する
• Step2 テーブルを消去する機能を追加する
• Step3 データをフィルタしてテーブルを再表示する

第6章　カルーセルを作成する

06-01 カルーセルを作成する

• Step1 サムネイルを横一列に並べる
• Step2 ボタンを作成して、サムネイルをスライドさせる
• Step3 サムネイルを繰り返し表示する
• カスタマイズのポイント サムネイルのサイズを変更する

06-02 大きな画像を表示する

• Step1 画像を表示する
• Step2 フェードインを付ける
• Step3 カルーセルのサムネイルをハイライトする
• Step4 キャプションを表示する

06-03 カルーセルのプラグインを作成する

• Step1 カルーセルをプラグインにする

06-04 プリロードのプラグインを作成する

• Step1 プリロードのプラグインを作成する

06-05 プラグインを別ファイルにする

• Step1 プラグイン専用の.jsファイルを作成する