購入前に目次をご確認ください
MdN Web Mook 実践Webデザイン jQuery＋CSSフレームワークでサクサクつくる「動き」と「仕掛け」
エムディエヌコーポレーション / 2013年08月01日 / 全257ページ
【サイトの「動き」も表現できるデザイナーになる！】
jQueryをはじめとするJavaScriptのライブラリ・プラグインやTwitter Bootstrapに代表されるCSSフレームワークなどを組み合わせて、Webサイトの複雑な「動き」を効率よく実装するテクニックを解説しています。Introduction＋本編5章構成で、スクロールに応じてコンテンツの続きを自動的に読み込む仕組み、Facebook風のスライド式サイドメニューなど、42のテクニックを掲載しました。サンプルデータはダウンロード提供しており、サイトの見た目だけではなく「動き」も表現できる、新時代のWebデザイナーに必携の1冊です！
jQueryをはじめとするJavaScriptのライブラリ・プラグインやTwitter Bootstrapに代表されるCSSフレームワークなどを組み合わせて、Webサイトの複雑な「動き」を効率よく実装するテクニックを解説しています。Introduction＋本編5章構成で、スクロールに応じてコンテンツの続きを自動的に読み込む仕組み、Facebook風のスライド式サイドメニューなど、42のテクニックを掲載しました。サンプルデータはダウンロード提供しており、サイトの見た目だけではなく「動き」も表現できる、新時代のWebデザイナーに必携の1冊です！
目次
- 扉
- クレジット
- はじめに
- 目次
- 本書の使い方
- 本書のサンプルデータについて
- ■INTRODUCTION 「動き」を表現するスキルの重要性
- Webを取り巻く環境の劇的な変化
- 新しいワークフローへの転換
- 理想的なモックアップとはどんなもの？
- 「動き」が書けるスキルの必要性
- ■CHAPTER 1 ナビゲーション・スクロール
- 01 上下スクロールに対応したパララックス効果
- 02 3Dエフェクトで表示するインパクトのあるサイドバー
- 03 スクロールしても画面上部に固定されるメニュー
- 04 ページスクロールにそって移動するサイドメニュー
- 05 クリックで表示・非表示が切り替わるメニューバー
- 06 スクロールに応じて開閉が切り替わるコンテンツ
- 07 コンテンツの全体像を一望できる折りたたみ可能なタイムライン
- 08 簡単に実装できる軽快な動作のツールチップ
- 扉
- クレジット
- はじめに
- 目次
- 本書の使い方
- 本書のサンプルデータについて
- ■INTRODUCTION 「動き」を表現するスキルの重要性
- Webを取り巻く環境の劇的な変化
- 新しいワークフローへの転換
- 理想的なモックアップとはどんなもの？
- 「動き」が書けるスキルの必要性
- ■CHAPTER 1 ナビゲーション・スクロール
- 01 上下スクロールに対応したパララックス効果
- 02 3Dエフェクトで表示するインパクトのあるサイドバー
- 03 スクロールしても画面上部に固定されるメニュー
- 04 ページスクロールにそって移動するサイドメニュー
- 05 クリックで表示・非表示が切り替わるメニューバー
- 06 スクロールに応じて開閉が切り替わるコンテンツ
- 07 コンテンツの全体像を一望できる折りたたみ可能なタイムライン
- 08 簡単に実装できる軽快な動作のツールチップ
- 09 スクロールに応じて自動的にナビゲーションを切り替える
- 10 スマートフォンで利用するアドレス帳のような動作
- 11 マウスのドラッグ操作で本のようにページ遷移するUI
- 12 Facebookアプリのように横から出てくるサイドメニュー
- ■CHAPTER 2 インタラクション
- 13 Metro UI CSSで実現するフラットデザイン
- 14 3Dのような見せ方ができるパララックス
- 15 続きのコンテンツを自動的に読み込み表示する
- 16 CSSによる残像を利用したボタンのアニメーション表示
- 17 コンテンツが縦横無尽に動くダイナミックなスライド
- 18 オーバーレイや吹き出しでページ・ガイダンスを表示
- 19 レスポンシブに対応したメールマガジンのテンプレート
- ■CHAPTER 3 画像・動画
- 20 photoboxを使ったおしゃれな写真ギャラリー
- 21 ウィンドウの大きさに合わせて拡大・縮小する背景画像
- 22 レスポンシブデザインでサイズ変更時のエフェクト
- 23 Media QueriesとjQueryを利用したRetina対応
- 24 ブラウザの幅に応じて表示する画像を切り替える
- 25 ウィンドウ幅にフィットするレスポンシブなスライドショー
- 26 3Dのhoverエフェクトを使ったインパクトのあるコンテンツ
- 27 サムネイル画像で切り替える画像ギャラリー
- 28 動画コンテンツを手軽に設置できるメディアプレイヤー
- 29 ユニークな動きで写真を拡大表示する画像ビューア
- 30 ドラッグ＆ドロップで利用できる画像ファイルアップローダー
- 31 画像編集機能をWebサイトに埋め込む
- ■CHAPTER 4 Twitter Bootstrap
- 32 Twitter Bootstrapを導入する前の準備
- 33 マウスイベントで表示される吹き出し風ポップオーバー
- 34 表示位置や表示時間を簡単に制御できるツールチップ
- 35 プルダウン表示も手軽に対応できるタブ・ナビゲーション
- 36 Twitter Bootstrapによるステップ表示
- 37 実装とカスタマイズが容易なユーザー・フォーム
- ■CHAPTER 5 外部サービスとの連携
- 38 各種SNSへ連動する共有ボタンの設定を一括で行う
- 39 YouTubeの動画コンテンツをレスポンシブに表示する
- 40 Flickrとサイトを連携して写真を一覧表示する
- 41 Gmap3を活用したGoogleマップのカスタマイズ
- 42 データの送信状況に応じてフォームに通知パネルを表示
- 目的別索引
- 用語索引
- 著者プロフィール
- 奥付
- カバー
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。
