本が無事発売されて、出版記念イベントが開催されました。

（写真は左からマイコミ角竹さん、秋葉、小山田さん、外村さん）

「CSS3 デザインプロフェッショナルガイド」

著者は以下の人たちです。

秋葉秀樹, 秋葉ちひろ, 小山田晃浩, 外村和仁, 蒲生トシヒロ, 宮澤了祐 

僕らが手がけたのは第三章のデザインサンプルで、実際にCSS3を使って作ったサイトやその一部を紹介する実践的なセクションです。

アイデアを織り交ぜ、全てのサンプルがオリジナルのデザインなので、そこからの作り込みがとても大変だったので思い入れのある作品になっています、よかったら是非手に取ってみてくださいね。

さてさて、先日5/28には東京に行ってきました、この書籍の発売セミナーイベントがありましたので、今日はそのレポートです。

USTREAMでセミナーの内容を見れます。

前編

後編

◎外村さんセッション-前編-

トップバッターは外村さん、CSS3のtransitionとanimationを解説しています。

書籍には詳しく解説出来なかったイージングの濃い話もあります。

両方ともアニメーションができるプロパティなんですが、動きをtransitionとanimationの違い、記述の方法などを実際作ったデモで解説しています。

■Transitionsプロパティの解説（外村さんセッション）

transition-durationはアニメーションする時間を指定出来ます、例えば...

　transition-duration: 2s:

とすると2秒かけてアニメーションします。

transition-propertyとは、どのプロパティの値をアニメーションするのか？という指定が出来ます。

例えば...

　transition-property: left;

にすると、leftの値に限定してアニメーションします。

　他にもdelay（遅延）やイージングをコントロールできます。

■Animationプロパティの解説（外村さんセッション）

Transitionsと似ているのですが、大きな違いはいくつもあります。

・キーフレームを指定して、例えば開始から50%のタイミングでCSSの数値状態を細かく指定します。

・無限ループが可能です。

・繰り返す回数が指定できます。

animation-directionとは、アニメーション終了時に繰り返しが指定されていると巻き戻しすることも指定出来ます。

　animation-direction: alternate;

にすると、今までのアニメーションの軌道を巻き戻し再生するという変わったプロパティです。

■イージング（外村さんセッション）

・アニメーションの動き方を指定できます。

・「ずっと等速」「最初ゆっくり、だんだん早く」など

CSSでアニメーションさせるのは簡単にできますが、内部でどういう処理が行われているか？という原理をJavaScriptに置き換えて解説してくださいました。

JavaScriptが分からない人でも、できるだけ短いソースで細かく解説してますので興味のある方は動画を停止しながら一つ一つ確認してみてください。

◎小山田さんセッション

まずはCSS3のサポート状況の説明。

古いブラウザへの問題。

■Graceful Degradation（小山田さんセッション）

基準を新しいブラウザに持っていき、古いブラウザには妥協するという考え方。

実際にはTwitterのホームページなどは、角丸やシャドウ、グラデーションなどをCSS3で表現していますが、IE8以前では諦める。

デザインが劣化するけど情報閲覧は可能、機能性も問題ないようにする、といった考え方です。

■Regressive Enhancement（小山田さんセッション）

手法としてPolyfillという方法を使うのですが、Graceful Degradationと違いは古いブラウザへの対応を諦めない、という言い方が正しいかもしれませんが、古いIEなどへの対応を正規のCSS3以外の手法で対応するというもの。

PIEというCSSエミュレータ使って、IE6でもborder-radiusなどを実現できるというもの。

http://www.lawson.co.jp/

などが代表的な例です。

元々背景画像などを指定してPIEで角丸などを使うと、深度の問題で隠れてしまうのでその対策なども紹介しています。くわしくは映像をみてください。

■SVGとSessionStrageを使った実際のサイトの紹介（小山田さんセッション）

http://www.kirishima.co.jp/aji/2011/spring/01/

PolyfillとはCSSだけでなく、HTML5の技術にも対応する考え方です。

例えばこのあたりのライブラリを使うことで古いIEにもHTML5の技術を使うことが可能になります。

◎秋葉のセッション

この言葉を使わなかったんですがHTML5の「Web Socket」を使ってアンケート投票をしました。

双方向通信の面白さが伝わったらうれしいなあ、と。

こちらはスライドも用意しましたので、USTREAMとあわせて見てみてください。

スライドURL（PDF: 3.9MB）

それでは、本をぜひ、よろしくお願いします！！