MdNCORPORATION

現場で役立つjQueryデザインパーツライブラリ

現場で役立つjQueryデザインパーツライブラリ

棧敷 友香子 著/錦織 幸知 著/Atelier*Spoon 著/KLEE 著/矢野 みち子 著
定価 3,080円
(本体 2,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2013-06-25
仕様 A5判/320P
ISBN 978-4-8443-6352-1
使い易いナビゲーションや分かり易いユーザインターフェース、CSSだけでは実現できない柔軟で利便性の高いレイアウトなど、Webサイトやブログの実用性を高めるためにjQueryは欠かすことができません。さらに、スマートフォンやタブレットなど、画面サイズの異なるデバイスでも見やすさを維持するレスポンシブデザイン、SNSとの連動、写真や動画を魅力的に、思い通りに制御する手法など、jQueryを用いて実現すべき機能は多岐にわたります。 本書では、実際に現場で活躍している著者陣が、いまWeb制作の現場で必要とされるjQueryの手法を余すところなく披露。地味ではあるが絶対に必要となる基礎的な機能から、利便性を高めるナビゲーションやインターフェースのアイデア、華やかにユーザーを引き付けるギャラリーやスライドショーのつくり方など101の機能を、簡潔に分かりやすく解説しています。 紙面では、各サンプルのブラウザ対応状況や、HTML、CSS、jQueryのコード、そしてカスタマイズのためのポイントまでを解説。サンプルはすべて専用サイトからダウンロードできるので、いますぐあなたの仕事やブログに活用できます。 【著者】 矢野みち子 Web制作の他、写真撮影なども行う静岡のWeb制作会社 株式会社KLEE、女性向けのデザインを中心にした中野晴代とのユニットAtelier*Spoon 在籍。 『すべての人に知っておいてほしい jQuery & jQuery Mobileの基本原則(MdN / 共著)』ほか、複数の著書がある。 棧敷友香子 映像・Web 制作会社に所属。デジタルコンテンツクリエイターとして、Web・DTP・映像制作を担当。主に、テレビ番組の番組サイトや企業サイトをはじめ、大型看板やチラシ・ ポスターのデザイン、TV-CM などを制作。 錦織幸知 1986年生まれ、静岡在住の Webデザイナー。日々、Webサイト制作に関連する業務を 全般的に行う。Adobe Fireworksの普及を目的としたブログ「FireWorks.20」を運営。著書に『すべての人に知っておいてほしいjQuery&jQueryMobileの基本原則(MdN /共著)』 がある。

※本書のサンプルデータは、本ページからのリンクを設置しておりません。本書p12に記載しておりますアクセス方法に基づきダウンロードしていただきますようお願いいたします。





■ページ見本










目次

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 jQueryUIで実装する多階層メニューリスト
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を使って簡単にスマートフォンサイトを作成する

索引
著者紹介

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

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