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

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

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

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

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

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

• amazonで見る
• MdNで見る

『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が満載となっています。

目次

Introduction HTML5の基本

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

Chapter 1 アニメーション

• マウスカーソルからパーティクルが飛び出すアニメーション
• インライン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です。

↓コピペ用

書籍応募の締め切り

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

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

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

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

http://www.facebook.com/html5memo

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

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