MdNCORPORATION

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

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

ワークス 著/アルディート 著
本体 2800円(税別) ※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2013-08-01
仕様 B5判/256P
ISBN 978-4-8443-6357-6
jQueryをはじめとするJavaScriptの各種ライブラリ・プラグインや、Twitter Bootstrapに代表されるCSSフレームワークなどを組み合わせて、Webサイトの複雑な「動き」を効率よく実装するテクニックを解説しています。従来は、プログラマーがJavaScriptを使って複雑で長いプログラムを書かなければ実装できなかったサイトの「動き」と「仕掛け」を、jQueryやCSSフレームワークを利用することで、Webデザイナーでも比較的簡単なソースコードで、時間と労力を掛けずに実現するためのテクニックを集めました。 Introduction+本編5章構成で、スクロールに応じてコンテンツの続きを自動的に読み込む仕組み、Facebook風のスライド式サイドメニューなど、42のテクニックを掲載しています。またIntroductionでは、デバイスの多様化など昨今のWebを取り巻く環境の変化を分析しながら、それに対応した新しいワークフローのあり方を考察しています。サンプルデータはダウンロード提供しており、従来の「見た目だけをつくる」からサイトの「動き」も表現できる新しい時代の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 データの送信状況に応じてフォームに通知パネルを表示


目的別索引
用語索引

お詫びと訂正

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

お詫びと訂正のお知らせ



このたびは『実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」』をご購入いただきまして、誠にありがとうございました。

本書の内容に誤りがございました。
正誤表PDFを用意させていただきましたので、ご利用いただけますようお願い申し上げます。

訂正PDFのダウンロード(PDFファイル:1.6MB)
seigohyo_jissen.pdf

ご迷惑をおかけいたしまして誠に申し訳ございません。
訂正してお詫びいたします。

Webビジネスを成功に導く指南書・売れ筋ラインナップ

創作の力になるデザインと配色の基本が学べるシリーズ