MdNの本

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

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

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

これが“今の主流”の使い方! プロが現場で使う上級テクニックを解説。

秋元 良平 著/大藤 幹 著/小原 暢 著/北川 貴清 著/栗本 光 著/佐藤とも子・サチコ(螺旋デザイン) 著/張 臻 著/中農 稔 著/ハヤシ ユタカ 著/比留間 和也 著/藤澤 伸 著
B5判 / 256P
ISBN978-4-8443-6410-8 / 価格(本体2,800円+税)※電子版の価格は販売ストアにて
2014年03月24日発売

Webサイト制作の現場で活用できる、HTML5の実践的なテクニックを集めた解説書。HTMLの最新バージョンであるHTML5は、ブラウザだけで華やかな演出や高度な処理が可能になる点などが注目を集め、制作現場で主流の技術のひとつになりつつあります。しかし、実際のWeb制作では、単にHTML5でマークアップを行うだけでは、HTML5の機能を充分に活用しているとは言い難いでしょう。第一線のプロは「HTML5を使って何を作るのか」「どのように使うのか」を切り口に、JavaScript、jQuery、CSS3、CSSフレームワークなどの技術といっしょに活用するテクニックを解説したのが本書の特長です。 全体は4章構成で、canvas要素・SVG要素を活用したアニメーションや、画像を加工するWebアプリのUIなどの制作方法を掘り下げています。IntroductionにはHTML5でのマークアップや新しい要素といった基本事項をまとめたほか、サンプルデータをダウンロード提供しています。実際のサイトでHTML5の取り入れ方がわからない、デザインや演出のアイデアはあるが、どの技術で実現できるのかわからないなどといった方には、特に役立つ内容です。

twitter facebook google+ このエントリーをはてなブックマークに追加 RSS

ページイメージ

クリックすると折りたためます
■ページ見本
















目次

クリックすると開きます

【目次】
【目次】

●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フレームワークでレイアウトのベースを作成

巻末:用語索引