MdNCORPORATION

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

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

ワークス 著/アルディート 著
定価 3,080円
(本体 2,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 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フレームワークでサクサクつくる「動き」と「仕掛け」』をご購入いただきまして、誠にありがとうございます。
以下に本書の解説で使用したサンプルデータを用意しましたのでご利用ください。


CHAPTER1.zip(6.4MB)

CHAPTER2.zip(2.8MB)

CHAPTER3.zip(55.9MB)

CHAPTER4.zip(0.9MB)

CHAPTER5.zip(0.3MB)


■ダウンロードにあたってのご注意■

ダウンロードファイルは、ZIP形式で圧縮されています。

Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。
圧縮ファイルはCHAPTERごとに分かれており、解凍したフォルダ内には記事番号のフォルダに分けてサンプルデータが収録されています。各CHAPTERのフォルダには「はじめにお読みください.html」が同梱されていますので、ご使用の前に必ずお読みください。


■ダウンロードファイル解凍時のご注意■

Windowsをご利用の場合は、ダブルクリックしてもダウンロードファイルを正しく解凍できない場合があります。
リンク画像が表示されないなど、サンプルファイルの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される


※弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただしサンプルデータ中に含まれるjQueryや各種プラグインなどの一般に公開されているライブラリ類については、各ライブラリのライセンス条件に従います。

※弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。

※弊社Webサイトからダウンロードできるサンプルデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※本書に掲載されているJavaScript、HTML、CSS等のコメントや改行位置等は、紙面掲載用として加工していることがあります。ダウンロードしたサンプルデータとは異なる場合がありますので、あらかじめご了承ください。

※サンプルのなかには、Webサーバの機能を利用しているなどの理由から、ローカル環境上では正しく動作しないものがあります。このようなサンプルの場合は、Webサーバ上に設置したうえで機能をお試しください。

お詫びと訂正

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

お詫びと訂正のお知らせ



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

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

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

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

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊