レポート

ソーシャルWebやHTML5/CSS3のポイントが解説された「Web Directions East 2010」レポート(前編)

この記事を読むのに必要な時間:およそ 4.5 分

Adobeランチセッション:Greg Rewis氏「CSS3 Transformations, Transitions and Animations」

Greg Rewis (グレッグ・ルイス)氏は,Adobe CS Web Premiumのエバンジェリストであり,毎年開催されているAdobe MAXでもお馴染みだ。氏は「このトピックはCSS3の中でももっともエキサイティングなものの一つだ」として,Transformation, Transitions, Animationsを挙げた。

写真9 Greg Rewis氏

写真9 Greg Rewis氏

CSS2までは,Flashのようにオブジェクトに対してアニメーションやトゥイーンを行うにはJavaScriptが必要だった。CSS3で実装されたTransitionsとAnimationsはこれらを強力にサポートする実装なのだ。

それぞれのデモも踏まえた詳細な解説もなされた。Transformは,DOMオブジェクトに対して移動や回転,湾曲などの変形処理を行う機能である。同じくTransitionとは,簡単なアニメーションを付加できる機能だ。これらは組み合わせて使うことが多いだろう。基本的には2つの変化状態をtransformプロパティで指定し,transitionプロパティを使って⁠変化にかかる時間とイージング"の引数を渡すだけでよい。詳しくは 以下の記事を参照するとより理解が進むだろう。

対してAnimationは,もっと複雑なアニメーションを付加できる機能である。Transitionは基本的に2つのキーフレームのみのトゥイーンとなるが,Animationではそれ以上のキーフレームの指定ができる。

Animationに関しては,実際のセッションを動画の公開を快諾いただいたのでぜひWeb Directions Eastの空気に触れてほしい。

ニコニコ動画:https://www.nicovideo.jp/watch/sm12851649

なお,Dreamweaver CS5はHTML5とCSS3のサポートをアップデート。ちろんコードヒントにも対応している。なお,現状のブラウザのサポート状況はまちまちである。実際には-webkit-や-moz-などのプレフィックスを付加することになるだろう。

余談になるが,このようなデモをすぐに試したい場合は,後述のサリバン氏がcss3genaratorなどのサイトがお勧めしている。CSS3で何が変わるのか,実際書いて確かめることで,より理解が進むことだろう。

Stephanie (Sullivan) Rewis氏「進化するCSS3の世界」

Stephanie (Sullivan) Rewis (ステファニー・サリバン・ルイス)氏は,⁠Mastering CSS with Dreamweaver CS4』をはじめとして数多くの書籍を執筆しており, Web Standards ProjectのWeb標準エバンジェリストとしても活動している。

写真10 Stephanie (Sullivan) Rewis氏

写真10 Stephanie (Sullivan) Rewis氏

氏は始めに,CSS3で実装された多種の装飾要素について,過剰に化粧された女性のスライドを見せながら,⁠できる⁠⁠やるべき⁠は違う。選んで使って欲しい」と語り,現状CSS3を使う上での原則を提示した。

  • それが本当に必要であること
  • 利用ユーザーをよく知ること
  • どのブラウザをメインターゲットとするか
  • クリティカルな問題がないか
  • 最低限のコンプライアンスの厳守

例として角丸ボタンを使ったサンプルを示しました。IEでは表示できないが,それはデザインのみの制約であって,そこまでクリティカルな問題ではないと言及した。

次に,太陽系の惑星がアニメーションするデモを行った。WebKitでは問題なく動き,Firefoxでは回らないがコンテンツはすべて表示されている。しかしIEは惑星すら表示されず,コンテンツとして破綻している。これでは問題だ。こうした場合には,もちろんコンテンツの再考も必要だが,JavaScript(IE7.jsなど)を使えば非サポートブラウザを補完することもできるとした。

写真11 太陽系の惑星がアニメーションするデモ

写真11 太陽系の惑星がアニメーションするデモ

氏がおすすめするのは,CSS3やHTML5などの新要素,新機能を検証・検出するModernizr。非常にパワフルなライブラリで,レポートのような使い方だけでなく,サポート状況をJavaScriptのオブジェクトとして生成するためscript内での判定条件として利用することもできるので,興味があればぜひ調べてみてほしいと話した。

写真12 Modernizrの紹介

写真12 Modernizrの紹介

次に,⁠今日から使用するには-webkit-や-moz-などのベンダープレフィックスを使用しなければならない」とした上で,CSS3で新たに追加された要素,実装について説明。セレクタの解説では,主な属性セレクタと擬似セレクタを紹介した。

前方一致 selector[attr^=value]

/*href属性の前からhttp://が一致するa要素*/
a[href^="http://"]

後方一致 selector[attr$=value]

/* href属性の後から.zipが一致するa要素 */
a[href$=".zip"]

内包 selector[attr*=value]

/* href属性にgihyo.jpを含むa要素 */
a[href*="gihyo.jp"]

疑似セレクタ :last-child :first-child :nth-child

/* ul要素に含まれる最後のli要素 */
ul li:last-child

/* ul要素に含まれる最初のli要素 */
ul li:first-child

/* 奇数のli要素 */
li:nth-child(odd)

また,新しいカラータイプとしてrgbaとhslaを解説。rgbaを利用すれば透明度を変更できるが,opacityプロパティとの違いとして「背景のみを透過し,コンテントには影響しない」と説明。サンプルを示した。hsla(hue, saturation, lightness, alpha-transparency)は,デザイナーライクな指定方法で色相,彩度,明度,透過率で設定できる。

そしてボーダーに対する角丸をつくるborder-radius,ドロップシャドウやグローを付加できるbox-shadow,テキストシャドウ効果のtext-shadowを解説。ドロップシャドウやグローなどのエフェクトは負荷が高いため,⁠やりすぎてはいけない⁠と注意。

次に,ボックス要素の背景におけるグラデーション表現の解説では面白い手法としてツートーングラデーションを紹介。スムーズな段階ではなく,はっきりとしたツートーンに設定して背景イメージとして利用できるので,コンテナーの背景としても使えるだろう。注意点として,グラデーションが非サポートのブラウザでも色は表示されるように先に通常の指定をしておくことも重要だとした。また,複数の背景画像(background-image)を指定できることにも言及,先に指定したものが下に引かれ,レイヤーのような表現が可能になった。

それ以外にも,マルチカラムに対応したため,これまでfloatで行ってきたことによって非常に難しかったレイアウト作法が,よりシンプルにできるようになったことにも注目した。

以下は,解説内で紹介されたCSS3に関する便利なリソースリンクである。学習だけでなく案件でも即利用できるものもあるので,ぜひ活用してほしい。

(後編に続く)

著者プロフィール

加茂雄亮(かもゆうすけ)

株式会社ロクナナにて,ActionScriptを伴うFlashコンテンツや,AjaxコンテンツなどRIA開発に従事するフロントエンドエンジニア。テクニカルライターとしての一面を持ち,WEB・雑誌・書籍、媒体問わず執筆。また,イベントやセミナーでの講演など,精力的に活動している。

URLhttp://log.xingxx.com/
URLhttp://rokunana.com/