DESIGN GUIDE HTML5 CANVAS ＆ CSS3デザインガイド
- 鈴木清安 著
- 定価
- 2,838円（本体2,580円＋税10%）
- 発売日
- 2012.2.3［在庫なし］
- 判型
- B5
- 頁数
- 260ページ
- ISBN
- 978-4-7741-4970-7
概要
iPadやスマートフォンの普及に伴い注目を集めているHTML5とCSS3。Flashを使わないで、今までにない表現力豊かなデザインや動きを実現することができるのがHTML5とCSS3です。特にデザイナーにとっては、HTML5ではCANVASという大幅に拡張されたグラフィックの作成機能によって文字通りWeb画面をピクセル単位で描画でき、CSS3では強化されたアニメーション機能が魅力的です。本書ではこのHTML5のCANVASとCSS3のアニメーションに的をしぼり解説します。また、掲載サンプルはWeb上にアップされているので、パソコンやスマートフォンから直接アクセスできます！
こんな方にオススメ
- デザイナーおよびWeb新技術に関心を持つ人
- Flashを使わずにアニメ表示や動画呼び出しをiPhoneなどのスマートフォンでもできるようにしたい人
目次
- まえがき
- 本書の読み方
- サンプルファイルについて
第1章 HTML5 CANVASの基本とCSS3の新機能
Chapter 01 CANVASとは
- TECH01 HTML5の基本書式
- TECH02 CANVASタグの基本
- TECH03 CANVAS描画の流れ
- TECH04 基本的なプロパティ・メソッド
- TECH05 そのほかのプロパティ・メソッド
Chapter 02 CSS3とは
- TECH01 ベンダープレフィックス
- TECH02 CSS3の主な新機能
Chapter 03 アニメーションのパターン
- TECH01 CANVASのアニメーション
- TECH02 CSS3のアニメーション
- TECH03 CSS3の2つのアニメーション
Chapter 04 HTML5での動画の再生
- TECH01 <video>タグ
- TECH02 動画形式とブラウザ
第2章 グラフィック表現の実例テクニック
Chapter 01 ランダム
- TECH01 ランダム文字
- TECH02 ランダムライン
- TECH03 ランダムサークル
- TECH04 視力検査表1
- TECH05 視力検査表2
Chapter 02 グラデーション
- TECH01 円形グラデーションアニメーション
- TECH02 線形グラデーションアニメーション
Chapter 03 たくさんのオブジェクト
- TECH01 バウンドボール
- TECH02 マルチCANVAS
Chapter 04 Z-INDEX
- TECH01 上下入れ替え
Chapter 05 ペイント
- TECH01 お絵描きボード
Chapter 06 ゲーム
- TECH01 ライフゲーム
- TECH02 シューティングゲーム
第3章 実践！ 目的別描画テクニック
Chapter 01 オープニング・タイトルアニメーションを作る
- TECH01 画像をフェードイン・フェードアウトさせるには？
- TECH02 画像を変形させるには？
- TECH03 サンプルの完成コード
Chapter 02 iOS風ボタンアイコンを作る
- TECH01 CANVASとCSS3によるボタンアイコンの作成
- TECH02 そのほかの作り方
- TECH03 サンプルの完成コード
Chapter 03 動画にマスクをかける
- TECH01 動画の取り込み
- TECH02 マスクのかけ方
- TECH03 そのほかの作り方
- TECH04 サンプルの完成コード
Chapter 04 CANVASで画像フィルタを作る
- TECH01 ピクセル操作のメソッド
- TECH02 画像の色調を変える
- TECH03 画像をグレースケールにする
- TECH04 画像をぼかす
- TECH05 画像を変形させる
- TECH06 サンプルの完成コード
Chapter 05 CSS3でMac風ナビゲーションメニューを作る
- TECH01 画面のデザイン
- TECH02 ロゴの3Dアニメーション
- TECH03 ボタンのアニメーション
- TECH04 サンプルの完成コード
Chapter 06 CSS3でフォトアルバムを作る
- TECH01 2D Transformによるフォトアルバム
- TECH02 3D Transformによるフォトアルバム
- TECH03 サンプルの完成コード
第4章 付録
- CANVAS & SS3，ほか，主要項目リスト
- CANVASに関する事項
- 動画に関する事項
- そのほかのhtmlタグ
- CSS3に関する事項
- そのほかのJavaScript