新たに始まった連載「CSS3アニメーションでつくるインターフェイス表現」では、CSS3によるアニメーション表現を紹介していきたい。その中でも、幅広い読者に応用してもらえるだろうインターフェイスをおもなお題とする。CSS3が充実し、ブラウザの実装も進んできたので、JavaScriptコードを書かずとも豊かな表現ができる。第1回は、基本を抑える意味で、プッシュボタンのアニメーションをつくる。
ボタンのもとになる静的スタイル
まず、<body>
要素に書くコードだ。プッシュボタンにする<a>
要素は、つぎのようにclass
属性"button"を定めた<p>
要素に含める。それをさらに、class
属性"container"の<div>
要素で包んだ。
プッシュボタンのもととなるスタイル(図1)は、以下の<style>
要素で定める。まだ、アニメーションはしないし、四角い背景があるだけでプッシュボタンとしての見た目も寂しい。順に手を加えていこう。
ボタンの角に丸みを加える
ボタンらしく、4つの角は丸める。そのためのプロパティは、border-radius
だ。プロパティの値には、角丸の半径を与える。
プッシュボタン(class
属性"button")の<a>
要素に、つぎのようにボックスの角丸(5ピクセル)を定めた。すると、ボタンの背景の4つの角に丸みが加わる(図2)。
影でボタンを立体的に見せる
さらに、box-shadow
プロパティでボタンに影を加えたい。オプション(構文の[]は省略可の意)のinset
は後で用いる。水平・垂直のずれをともに正の値にすると、影は右下につく。負の値なら左上だ。
プッシュボタン(class
属性"button")の<a>
要素には、つぎのように右下に影を加えた(図3)。影はrgba()
関数で半透明にしている。
box-shadow
プロパティには、カンマ(,)区切りで影をいくつでも加えられる。オプションにinset
を与えると、影はボックスの内側にかかる。位置は、水平・垂直のずれをともに正の値にすると左上に、負の値だと右下になる。つぎのように、内側左上を白、右下を黒で定めれば、ボタンが出っ張って見える(図4)。
プッシュボタンの外側右下の影も加えた<style>
要素の記述はつぎのとおりだ。これで、3次元で出っ張ったように見えるプッシュボタンの右下に影を加えた表現ができた(図5)。
マウスポインタを重ねたときのボタンの表現
プッシュボタンにマウスポインタを重ねたとき、見た目が変わるようにしよう。つぎのように<a>
要素の:hover
擬似クラスで、背景色を明るめに変えるとともに、影は縮めた。さらに、transform
プロパティで位置を少し下げる。translateY()
関数が垂直位置を動かす。これで、マウスポインタが重なると、プッシュボタンの色と影が変わって、下にずれる(図6)
プッシュボタンのボックスの位置を下げるには、transform
プロパティでなく、たとえばつぎのようにtop
プロパティで変えることもできる。だが、transform
は位置を動かすだけでなく、伸縮や回転もできるし、さらに3次元の表現も加えられる。さまざまなCSSのアニメーションを試してみようというこの連載では、こちらのプロパティを使いたい。
プッシュボタン上でマウスボタンを押したときの表現は、<a>
要素の:active
擬似クラスにつぎのように定める。内側(inset
オプション)の影の左上と右下の色を入れ替えれば、プッシュボタンは凹んで見える(図7)。外側の影はさらに縮めて、位置も下げた。これでプッシュボタンとしての基本的な動きができた。
ベンダープレフィックスと-prefix-free
ひとつ注意しておかなければならないのは、transform
プロパティの仕様だ。本稿執筆時現在では「草案」となっている。そのため、ブラウザやそのバージョンによっては、ベンダープレフィックス(接頭辞)を添えなければならない。たとえば、ChromeやSafariであれば、つぎのようにプレフィックス-webkit
を加えることになる。
この連載はCSS3のアニメーションでどのような表現ができるのか、実験的な紹介をしていきたい。したがって、「勧告」前の機能も使うつもりだ。他方で、細かい装飾的なコードは省いて、簡潔に示したいと考える。そこで、ベンダープレフィックスは、JavaScriptライブラリ「-prefix-free」を使って入力は省くことにしよう(図8)。-prefix-freeはつぎのように<script>
要素に読み込めばよく(JSファイルはフォルダ「lib」に納めた)、JavaScriptコードは書かなくてよい。
ボタンに滑らかなアニメーションを定める
擬似クラス:hover
と:active
に定めたプッシュボタンの見た目は、このままではただちに切り替わる。滑らかなアニメーションにした方が、魅力は増すだろう。そこで、transition
プロパティ(仕様は「草案」)を用いる。最低限与えるべき値は、アニメーションに費やす時間だ(あとはデフォルト値が使われる)。つぎのようにプッシュボタンの<a>
要素にプロパティを定めれば、0.5秒かけて滑らかに動く。
プッシュボタンを押したときの動き(:active
擬似クラス)はもっと速くしたい。もちろん、transition
プロパティを定め直してもよい。だが、アニメーション時間だけを変え、他の設定は触らずにおきたいという場合に備えて、つぎのようにtransition-duration
プロパティを使うことにしよう。
これで今回のお題のプッシュボタンのアニメーションはでき上がった。ここまで書いてきた<script>
と<style>
の定めはつぎのコード1のとおりだ。併せて、後掲サンプル1をjsdo.itに掲げた。