実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」 立ち読み

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

出版社 エムディエヌコーポレーション
著者 株式会社ワークス、株式会社アルディート
対応デバイス
PC対応 iPhone対応 iPad対応 Android対応

この本の内容

【見た目だけのWebデザインにさようなら。サイトの動きも表現できるデザイナーになる!】
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 簡単に実装できる軽快な動作のツールチップ
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 データの送信状況に応じてフォームに通知パネルを表示
目的別索引
用語索引
著者プロフィール
奥付
カバー