MdNCORPORATION

HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック

HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック

秋元 良平 著/大藤 幹 著/小原 暢 著/北川 貴清 著/栗本 光 著/佐藤とも子・サチコ(螺旋デザイン) 著/張 臻 著/中農 稔 著/ハヤシ ユタカ 著/比留間 和也 著/藤澤 伸 著
本体 2800円(税別) ※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2014-03-24
仕様 B5判/256P
ISBN 978-4-8443-6410-8
Webサイト制作の現場で活用できる、HTML5の実践的なテクニックを集めた解説書。HTMLの最新バージョンであるHTML5は、ブラウザだけで華やかな演出や高度な処理が可能になる点などが注目を集め、制作現場で主流の技術のひとつになりつつあります。しかし、実際のWeb制作では、単にHTML5でマークアップを行うだけでは、HTML5の機能を充分に活用しているとは言い難いでしょう。第一線のプロは「HTML5を使って何を作るのか」「どのように使うのか」を切り口に、JavaScript、jQuery、CSS3、CSSフレームワークなどの技術といっしょに活用するテクニックを解説したのが本書の特長です。 全体は4章構成で、canvas要素・SVG要素を活用したアニメーションや、画像を加工するWebアプリのUIなどの制作方法を掘り下げています。IntroductionにはHTML5でのマークアップや新しい要素といった基本事項をまとめたほか、サンプルデータをダウンロード提供しています。実際のサイトでHTML5の取り入れ方がわからない、デザインや演出のアイデアはあるが、どの技術で実現できるのかわからないなどといった方には、特に役立つ内容です。

→サンプルデータのダウンロードはこちら



■ページ見本










目次

【目次】

●Introduction HTML5の基本
HTML5の概要
基本的な書式と文法
HTML5でのマークアップ
HTML5の新要素
古いバージョンのIE対策

●Chapter 1 アニメーション
01 マウスからパーティクルが飛び出すアニメーション
02 インラインSVGを使った地図の経路表示アニメーション
03 物理エンジン「Box2D.js」でボールに自然な動きをつける
04 マウスの動きに反応して変化するアニメーション
05 上下スクロールに連動したパララックス効果
06 ローディングの仕組みと実装箇所の考察
07 Canvasでテキストにノイズ風のエフェクトをつける

●Chapter 2 API・Webアプリ
08 Canvasで写真を加工する画像エディタを作成
09 ドラッグ&ドロップ操作が可能なショッピングカート
10 ラップタイムを記録・保存できるストップウォッチを作成
11 ペンの太さ・色を選択できるシンプルなお絵描きアプリ
12 jQueryのマルチページ機能を活用したスマートフォンサイト
13 Geolocation APIで現在地周辺の地図を表示する
14 ネイティブアプリケーションをPhoneGapで簡単に作成する

●Chapter 3 動画・音声・UI
15 video要素を使った動画プレーヤーの作成
16 audio要素を利用したオーディオプレーヤーの作成
17 レスポンシブに対応したナビゲーションのパターン
18 ドロップダウン表示も可能なタブナビゲーションの実装
19 audio要素でメニューUIに効果音をつける
20 Google Web Designerの基本操作とサンプル作成
21 input要素で作成したUIを拡張できるフォーム

●Chapter 4 HTML5+CSS3
22 CanvasアニメーションとCSS3アニメーションの比較
23 CSS3とjQueryで作る動きのあるWeb ページ
24 Bootstrapを使用してランディングページを作成
25 独自データ属性を利用したスライド風に遷移するページ
26 レスポンシブCSSフレームワークでレイアウトのベースを作成

巻末:用語索引

オリジナルグッズ制作がもっと楽しくなる大活躍アイデアシリーズ

今よりぐっと"良い"写真に仕上げる!おすすめ解説書ラインナップ