購入前に目次をご確認ください
MdN Web Mook 現場で役立つjQueryデザインパーツライブラリ
エムディエヌコーポレーション / 2013年06月25日 / 全322ページ
【jQueryでやりたいことが思い通りにすぐできる！】
使いやすいナビゲーションやユーザインターフェース、柔軟で利便性の高いレイアウト制御、モバイル対応、写真や動画、SNSとの連動など、Web制作の現場で絶対に必要な、ぜひ使いたい101個の機能を分かりやすいサンプルで紹介します。紙面では、各サンプルのブラウザ対応状況や、HTML、CSS、jQueryのコード、そしてカスタマイズのためのポイントを簡潔に解説。サンプルはすべてWebサイトからダウンロードできるので、いますぐあなたの仕事やブログに活用できます。
使いやすいナビゲーションやユーザインターフェース、柔軟で利便性の高いレイアウト制御、モバイル対応、写真や動画、SNSとの連動など、Web制作の現場で絶対に必要な、ぜひ使いたい101個の機能を分かりやすいサンプルで紹介します。紙面では、各サンプルのブラウザ対応状況や、HTML、CSS、jQueryのコード、そしてカスタマイズのためのポイントを簡潔に解説。サンプルはすべてWebサイトからダウンロードできるので、いますぐあなたの仕事やブログに活用できます。
目次
- 扉
- 免責事項
- はじめに
- 本書の使い方
- 目次
- サンプルダウンロードと使用許諾
- ■INTRODUCTION jQueryの基本
- 01 jQueryの導入
- 02 jQueryの基本構文とセレクタ
- 03 メソッドとイベント処理
- ■CHAPTER 1 ナビゲーション
- 01 細かなCSS設定なしに画像をロールオーバーさせる
- 02 画像のロールオーバーにアニメーションを付ける
- 03 細かなCSS設定なしに円形メニューを作る
- 04 jQuery UIを使ったアコーディオン
- 05 jQuery UIを使った順番を入れ替えられるアコーディオン
- 06 アニメーションで切り替わるタブ
- 07 グローバルナビゲーションをウィンドウ上部に固定する
- 08 特定の要素を固定表示させる
- 09 スクロールするとフェードインで現れる「戻る」ボタン
- 扉
- 免責事項
- はじめに
- 本書の使い方
- 目次
- サンプルダウンロードと使用許諾
- ■INTRODUCTION jQueryの基本
- 01 jQueryの導入
- 02 jQueryの基本構文とセレクタ
- 03 メソッドとイベント処理
- ■CHAPTER 1 ナビゲーション
- 01 細かなCSS設定なしに画像をロールオーバーさせる
- 02 画像のロールオーバーにアニメーションを付ける
- 03 細かなCSS設定なしに円形メニューを作る
- 04 jQuery UIを使ったアコーディオン
- 05 jQuery UIを使った順番を入れ替えられるアコーディオン
- 06 アニメーションで切り替わるタブ
- 07 グローバルナビゲーションをウィンドウ上部に固定する
- 08 特定の要素を固定表示させる
- 09 スクロールするとフェードインで現れる「戻る」ボタン
- 10 スクロールすると下から出現する「戻る」ボタン
- 11 折りたたみアニメーションが付いたパンくずリスト
- ■CHAPTER 2 インターフェース
- 01 自動的にメールアドレスにリンクを付ける
- 02 リンクの内容に合わせてアイコン画像を挿入する
- 03 ブロック要素全体にリンクを設定する
- 04 文章中のhttp://から始まるURLに 自動でリンクを付ける
- 05 外部リンクを自動的に別ウインドウで開く
- 06 リスト要素を自動分割する
- 07 リストをツリー表示型のメニューに変更する
- 08 画面をクリックした時にほわっとした輪っかのアニメーションを表示する
- 09 テキストや画像などをぶるぶるさせるアニメーションを実装する
- 10 アニメーションするテキストシャドウ
- 11 アニメーションしながら交互にスタイルを切り替える
- 12 文字が流れるニュースティッカー
- 13 ページ内の文字サイズを変更できるボタンを設置する
- 14 ウインドウサイズに合わせて文字の大きさを変化させる
- 15 ドラッグ＆ドロップで要素の順番を入れ替える
- 16 ドラッグ＆ドロップで要素を移動できるようにする
- 17 ドラッグで移動できる範囲を制限する
- 18 要素がドロップされたことを判定する
- 19 ドラッグしてサイズを変更できるボックスを作成する
- 20 シンプルなダイアログボックス
- 21 jQuery UIを使用したダイアログボックス
- 22 jQuery UIを使用した要素を追加するダイアログフォーム
- 23 スリムなモーダルウインドウ
- 24 マウスオーバーで現れるツールチップ
- 25 マウスに追従するリッチなツールチップ
- 26 jQuery UIで実装する吹き出し型ツールチップ
- 27 オリジナルのスクロールバーを作成する
- 28 jQuery UIを使用したスライドバー
- 29 右クリックでオリジナルメニューを表示する
- 30 jQuery UIで実装する多階層メニューリスト
- 31 テキストボックスにフォーカスすると消える説明文を表示する
- 32 フォームの入力内容をチェックしてエラーメッセージを表示する
- 33 見た目もリッチなバリデート機能付きフォーム
- 34 ラジオボタン・チェックボックスの簡単バリデーション
- 35 フォームに入力した内容をCookieに保存する
- 36 選択しやすいselectボックス
- 37 色を選択する簡易カラーピッカー
- 38 ブラウザでカスタマイズ可能なカラーピッカー
- 39 フォームの日付入力が楽になるシンプルなデートピッカー
- 40 jQuery UIを使用したデートピッカー
- 41 年月をプルダウンメニューから選べるデートピッカー
- 42 画像をアップロードしてページに表示する
- ■CHAPTER 3 フォト＆ムービー
- 01 オープニングを豪華にするイントロエフェクト
- 02 Lightbox風のシンプルフォトギャラリー
- 03 シンプルに作れるスライドショー
- 04 本をめくるような演出のギャラリー
- 05 ランダムに表示されるポラロイド風ギャラリー
- 06 立体感のあるスライドギャラリー
- 07 マウスホイールで動くスライドギャラリー
- 08 シンプル設定のカルーセル
- 09 スクロールに合わせて画像の表示を開始するエフェクト
- 10 ページ送りを自動で生成するギャラリー
- 11 Youtube動画のギャラリー
- 12 Youtube動画を背景にする
- 13 背景にザラっとしたノイズを付ける
- 14 画像にトイカメラ風のフィルターをかける
- 15 画像の形に合わせてテキストを回り込ませる
- 16 テキストを画像に置換する
- 17 画像のキャプションを簡単に表示させる
- 18 ボックスに角丸を設定する
- 19 画像を拡大させるプラグイン
- 20 画像の一部を拡大できるプラグイン
- 21 画像のサムネイルを自動作成する
- 22 ウィンドウの大きさに合わせてサイズが変わる背景画像
- 23 jPlayerで音楽を埋め込む
- ■CHAPTER 4 レイアウト
- 01 ウィンドウの大きさに合わせてレイアウトが変更されるボックス
- 02 要素のボックスの高さを揃える
- 03 ドラッグで自由に再配置できるボックス
- 04 左右に隠れているボックスを表示する
- 05 文字色を簡単に変化させるプラグイン
- 06 テキストにグラデーションやシャドーの装飾を追加する
- 07 テーブルの装飾にjQueryを使用する
- 08 高機能なExcel風の表を作成する
- 09 CSVファイルを使用して表を作成する
- 10 CSVファイルを使用したテーブル付きグラフ
- 11 スムーズスクロール
- 12 シンプルなパララックス効果でインパクトのあるサイトを作る
- ■CHAPTER 5 ソーシャル
- 01 複数のSNSの投稿を一覧表示する
- 02 各SNSの「いいね!」ボタンを設置する
- 03 Twitterのつぶやきを横スライドしながら見せる
- 04 Google+の投稿を自動取得してウィジェットとして表示する
- 05 Instagramの写真を埋め込む
- 06 Google Static Mapsをズーム可能にする
- 07 簡単にGoogleMapsを埋め込む
- ■CHAPTER 6 モバイル
- 01 スマートフォンやタブレットにも対応したギャラリー
- 02 レスポンシブデザインに対応したグリッドを表示する
- 03 ウィンドウサイズに合わせて調整されるパンくずリスト
- 04 自動的に段数が変わるカラムレイアウト
- 05 ウインドウサイズに合わせてテーブル内の表示を変更する
- 06 jQuery Mobileを使って簡単にスマートフォンサイトを作成する
- 索引
- 著者紹介
- 奥付
- カバー
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。
