こんにちは、秋葉です、やっと本が出ました。
「CSS3 デザインプロフェッショナルガイド」
< http://www.amazon.co.jp/dp/4839935467
>
著者は次の人たちです。
秋葉秀樹、秋葉ちひろ、小山田晃浩、外村和仁、蒲生トシヒロ、宮澤了祐
僕らが手がけたのは第三章のデザインサンプルで、実際にCSS3を使って作ったサイトや、その一部を紹介する実践的なセクションです。アイデアを織り交ぜ、すべてのサンプルがオリジナルのデザインなので、そこからの作り込みがとても大変だったので、思い入れのある作品になっています。よかったら是非手に取ってみてくださいね。
さてさて、5月28日には東京に行ってきました。この書籍の発売セミナーイベントがありましたので、今日はそのレポートです。
USTREAMでセミナーの内容を見られます。
前編
< http://www.ustream.tv/recorded/15005500
>
後編
< http://www.ustream.tv/recorded/15008361
>
「CSS3 デザインプロフェッショナルガイド」
< http://www.amazon.co.jp/dp/4839935467
>
著者は次の人たちです。
秋葉秀樹、秋葉ちひろ、小山田晃浩、外村和仁、蒲生トシヒロ、宮澤了祐
僕らが手がけたのは第三章のデザインサンプルで、実際にCSS3を使って作ったサイトや、その一部を紹介する実践的なセクションです。アイデアを織り交ぜ、すべてのサンプルがオリジナルのデザインなので、そこからの作り込みがとても大変だったので、思い入れのある作品になっています。よかったら是非手に取ってみてくださいね。
さてさて、5月28日には東京に行ってきました。この書籍の発売セミナーイベントがありましたので、今日はそのレポートです。
USTREAMでセミナーの内容を見られます。
前編
< http://www.ustream.tv/recorded/15005500
>
後編
< http://www.ustream.tv/recorded/15008361
>
●外村さんセッション-前編-
トップバッターは外村さん、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の技術を使うことが可能になります。
< https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
>
●秋葉のセッション
この言葉を使わなかったんですが、HTML5の「Web Socket」を使ってアンケート投票をしました。双方向通信の面白さが伝わったらうれしいなあ、と。
こちらはスライドも用意しましたので、USTREAMとあわせて見てみてください。
スライドURL（PDF：3.9MB）
< http://akibahideki.com/css3/20110528_event_tokyo/akiba_css3_tokyo.pdf
>
それでは、本をぜひ、よろしくお願いします！！
【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>
テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。