『HTML5デザイン仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック』発売いたしました。

エムディエヌコーポレーションよりHTML5、CSS3を活用した色々なサンプルが集まるネタ帳に2つのサンプルで執筆させていただきました。

自分が担当したのはCSSフレームワークでレスポンシブWebを作成するものと、ナビゲーションのスマートフォン対応の事例を数パターン執筆しました。

本ブログのリニューアルもこの2つのサンプルをベースに作成しております。

ページ最後に出版社様から本書を3冊プレゼントいただきましたので3名様にプレゼントがあります。

『HTML5デザイン仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック』 (2014/3/24)

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

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

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

Webサイト制作の現場で活用できる、HTML5の実践的なテクニックを集めた解説書。HTMLの最新バージョンであるHTML5は、ブラウザだけで華やかな演出や高度な処理が可能になる点などが注目を集め、制作現場で主流の技術のひとつになりつつあります。しかし、実際のWeb制作では、単にHTML5でマークアップを行うだけでは、HTML5の機能を充分に活用しているとは言い難いでしょう。

第一線のプロは「HTML5を使って何を作るのか」「どのように使うのか」を切り口に、JavaScript、jQuery、CSS3、CSSフレームワークなどの技術といっしょに活用するテクニックを解説したのが本書の特長です。全体は4章構成で、canvas要素・SVG要素を活用したアニメーションや、画像を加工するWebアプリのUIなどの制作方法を掘り下げています。IntroductionにはHTML5でのマークアップや新しい要素といった基本事項をまとめたほか、サンプルデータをダウンロード提供しています。実際のサイトでHTML5の取り入れ方がわからない、デザインや演出のアイデアはあるが、どの技術で実現できるのかわからないなどといった方には、特に役立つ内容です。

目次を見て頂くとわかりますが、HTML5やCSS3でもなかなか手の出しにくい部分のTIPSが満載となっています。

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

Chapter 2 API・Webアプリ

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

Chapter 3 動画・音声・UI

video要素を使った画像プレイヤーの作成
audio要素を使用したオーディオプレイヤーの作成
レスポンシブに対応したナビゲーションのパターン
ドロップダウン表示も可能なタブナビゲーションの実装
audio要素でメニューUIに効果音をつける
Google Web Designerの基本操作をサンプル作成
input要素で作成したUIを拡張できるファーム

Chapter 4 HTML5+CSS3

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

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

『HTML5デザイン仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック』を3名様にプレゼント

出版社様のご好意で本書を3冊いただきました。

そこでいつもブログを見ていただいている方に抽選で3名様にプレゼントいたします。

読んで見てみたいという方は、下記の方法で応募できます。

Twitterで応募

twitterで @html5memoをフォローし、「書籍プレゼント『HTML5デザイン仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック』が欲しい！ http://www.html5-memo.com/other/html5tips-book/ #html5css3book 」とツイートすればOKです。

↓コピペ用

書籍プレゼント『HTML5デザイン仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック』が欲しい！ http://www.html5-memo.com/other/html5tips-book/ #html5css3book

書籍応募の締め切り

2014年4月25日までツイートされた中から抽選で3名様を選び、ツイッターのダイレクトメールにてご連絡しますので、当選通知が来た方は送付先の住所を教えて下さい。

※なお発送は日本国内に限らさせていただきます。

なお、@html5memoをフォローし忘れてダイレクトメールが届かなかったり、連絡後1週間経っても返信が無い場合は当選が無効になるので気をつけて下さいね。

あわせてFacebookページも更新中

http://www.facebook.com/html5memo

FaceBookページでは「HTML5でサイトをつくろう」「WEBデザインクリップ」両ブログの更新情報やWEB制作においての気になる記事を更新しています。こちらもよかったらお願いします。

またこれから作成した2つのサンプルも紹介していきます。

『HTML5デザイン仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック』発売いたしました。

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

目次

Introduction HTML5の基本