次の方法で共有

HTML5 アプリケーションをビルドする

  • [アーティクル]

CSS3 の効果、切り替え効果、およびアニメーション

Clark Sell

 

Web 開発者には、構想を実現する 3 つのツールとして、HTML、CSS、および JavaScript があります。しかし、昔からそうだったわけではありません。以前は、テキストの影やグラデーションといった一見単純な効果であっても、CSS や HTML ではなく、別途画像エディターを使って作成していました。JavaScript もあるにはありましたが、Web アプリケーションの動作を滑らかに生き生きとさせるには、通常、相当量のコードが必要でした。こうした技法は、アプリケーションの初期開発を複雑にしていただけでなく、小さな変更にもコストがかかりました。

さいわい、CSS3 および HTML5 を使えば、以前のように画像を操作したり、JavaScript を習得する必要がなくなります。簡単な宣言型のマークアップを使用して、滑らかな操作や美しいエクスペリエンスを生み出すことができます。

ここで、失笑を隠せない方がいるかもしれません。CSS と HTML というだけで、シンプルだとは言えません。しかし、いずれおわかりになると思いますが、いくつか新しい CSS プロパティを学び、それを興味深いデモで試せば、特定の効果が必要であることをクライアントと交渉する時間など、実に多くの開発時間を節約できます。

影

まず簡単なところから、いくつか基本的な影の効果を見てみましょう。効果とは、オブジェクトの見え方を変えることにすぎません。たとえば、図 1 のテキストの影と四角形の影をご覧ください。

Shadow Effects
図 1 影の効果

この効果は、光がある方向からオブジェクトに当たり、そのオブジェクトの周りに影を映し出すという錯覚をもたらしています。これは、オブジェクトの見た目に奥行きを与えるのに役立ちます。また、オブジェクトが浮き上がっているように見せるのに役立つと言う人もいます。

影を追加するのは簡単で、次のようにしてヘッダーのテキストに影を追加できます。

h1 {
  text-shadow: black 2px 2px 12px 2px;   
}

text-shadow には次のようにさまざまなプロパティがあります。

  • 影の色 (省略可能): 名前で、または HSL カラー指定や RGBA カラー指定を使用して、影の色を指定します。
  • 水平方向のオフセット (必須): 水平方向の影の位置を示します。正の値は右方向、負の値は左方向に影を移動します。
  • 垂直方向のオフセット (必須): 垂直方向の影の位置を示します。正の値は下方向、負の値は上方向に影を移動します。
  • ぼかしの半径: 影として表示するテキストをどの程度はっきり表示するかを定義します。0px はフォントそのものを表示します。値を増やすにつれて、オブジェクトの端から次第にぼやけていきます。負の値は指定できません。
  • 影との距離: 影とオブジェクトの距離を設定します。影の形状が外側に広がる程度 (正の値)、または内側に縮小する程度 (負の値) を指定します。

四角形の影もテキストの影と同じように機能し、同じパラメーターを使用します。

box-shadow: red 10px 10px 0px 0px;

影はごく一般的な効果です。要素の奥行きを表現したり、要素にどのような目的があるかをユーザーに示すために、ボタンなどの要素に影の効果を施します。特定のオブジェクトに影を付け、UI の他のオブジェクトとの違いを際立たせます。以前は、このようなボタンを表現するのに Photoshop を使って PNG を作成していましたが、今ではマークアップでボタンに効果を施すことができます。もちろん、ここで説明しているのはごく一部です。不透明度、角の丸い罫線、グラデーション、文字体裁などを調整することで、多くのすばらしい効果を生み出すことができます。

変換

CSS の変換プロパティを使用して、指定した要素のサイズや領域を変換できます。これを示すため、画像を設定して、ユーザーが画像をポイントしたときに画像の大きさが 2 倍になるようにします。

#myImg:hover {
  transform: scale(2);
}

もちろんこれは CSS なので、実際には、適切なベンダー プレフィックスを含める必要があります。今回のコラムではこれらのプレフィックスを省略しますが、先ほどの変換は次のように記述します。

#myImg:hover {
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o- transform: scale(2);
  transform: scale(2);
}

機能検出も利用できます。機能の検出は、実際、今日の Web サイトに実装する最も重要なプラクティスの 1 つです。ユーザー エージェントに基づいてサイトの動作を決定するのではなく、Modernizr (modernizr.com、英語) のようなツールを使用してブラウザーに機能を問い合わせます。ユーザーが使っているブラウザーが必要な特定機能をサポートしていない場合は、代わりに、ポリフィル (ブラウザーに機能を実装する shim) を使用できます。これは CSS でも可能です。詳細については、「取り残されるブラウザーをなくす: HTML5 の導入戦略」(msdn.microsoft.com/magazine/hh394148) を参照してください。では、変換に戻ります。

倍率の変換以外に、2D 面または 3D 面で変換を施すことも可能です。2D 面では、要素を X 軸および Y 軸に沿って移動します。いくつかテキストを用意して、そのテキストを 45 度回転します。

 

.transform2d {
  transform: translate(0px, 0px)
             rotate(45deg)
             scale(1.45)
             skew(0deg, 0deg);
}

図 2 は、45 度回転した四角形を示しています。

Transforming an Element in 2D Space
図 2 2D 空間での要素の変換

2D もすばらしいのですが、現在の主役はもちろん 3D です。ユーザーに特殊な眼鏡を掛けてもらいたいとは思いませんが、四角形が画面から今にも飛び出しそうと感じてもらいたいと思います。そのためのコードを次に示します。

.transform3d {
  transform-origin-x: 50%;
  transform-origin-y: 50%;
  transform: perspective(110px) rotateY(45deg);
}

結果を図 3 に示します。

A 3D Transform
図 3 3D 変換

切り替え効果

次に取り上げる切り替え効果とは、あるスタイルや状態から別のスタイルや状態に要素を変化させることです。hover 擬似クラスから始めましょう。以前から CSS を使用して、要素の状態 (初期状態やイベント後の状態など) を設定していました。ボタン要素やアンカー リンクには、初期状態とホバー状態の 2 種類の状態があります。ユーザーがホバー状態をアクティブにすると、それらのプロパティが設定されます。ボタンをポイントする簡単な例を示します。

#boxTrans:hover {
  background-color: #808080;
  color: white;
  border-color: #4cff00;
  border-width: 3px;
}

標準的なコードなので、以前に記述したことがあるかもしれません。現在のブラウザーは非常に高速なため、状態遷移はほぼ一瞬で終わります。パフォーマンスの点からはすばらしいことですが、新たな問題も引き起こします。場合によっては、その状態変化が不快感を与えたり、表示すらされない場合があります。ユーザーがそのすばやくかすかな変化を見過ごす可能性は十分あり得ます。

CSS3 による切り替え効果では、切り替えにかかる時間など、切り替え効果のさまざまな側面を管理および制御できます。たとえば、ボタンの背景色をただ自動的に変化させるのではなく、その間に行うことを指定できるようになりました。

CSS の切り替え効果を追加するのは簡単で、切り替え効果のコマンドを基本要素に追加するだけです。例として、シンプルな四角形を作成し、その中にいくつかのテキストを収めます。ユーザーがその四角形をポイントすると、背景色、テキスト、および境界線が変化します。

#boxTrans {
  ...
  transition: all .5s linear;
  ...
}
#boxTrans:hover {
  background-color: #808080;
    color: red;
    border-color: green;
}

ご覧のように、#boxTrans 要素で切り替え効果を定義しました。この要素のすべてのプロパティを選択して切り替え効果を施し、0.5 秒間で直線的に (一定の速度で) 変化させます。また、以下のように、特定のプロパティだけを指定して変化させることも可能です。

transition: background-color .5s linear;

アニメーション

開始状態と終了状態をブラウザーに指示する切り替え効果とは異なり、アニメーションでは一定時間をかけて変化させる一連の CSS プロパティを指定します。アニメーションは、実際には切り替え効果を拡張したものにすぎません。アニメーションを作成する場合はキーフレームを使用します。キーフレームとは、アニメーション全体に設定した継続時間内のある特定時点におけるアイテムの状態と考えることができます。ここでは、前後にスクロールする小さな四角形の、シンプルなアニメーションを作成します。まず、要素を定義します。

<html>
...
  <div class="box" id="boxAnimation"></div>
...
</html>

この div boxAnimation に、ちょっとしたスタイルを指定して、四角形に見えるようにします。

<style>
...
  .box {
  border: 1px solid black;
  background-color: red;
  width: 25px;
  height: 25px;  
  position: relative;
  }
...
</style>

次に、基本アニメーションを定義します。アニメーションのキーフレームと継続時間の両方を設定します。継続期間プロパティを設定しないと、既定値が 0 になっているためアニメーションが実行されません。アニメーションの反復回数も設定します。ここでは、それぞれ 5 秒間かけて 10 回繰り返すよう指定しています (必要であれば、animation-iteration-count を永遠に繰り返すよう設定できます。これにより、ページが開いている限りアニメーションが繰り返されます)。

#boxAnimation {
  animation: 'not-knight-rider';
  animation-duration: 5s;
  animation-iteration-count: 10;
}

最後に、キーフレームそのものを定義する必要があります。まず、画面上で四角形を動かす、シンプルなキーフレームを定義します。この定義では、from プロパティと to プロパティを設定しています。これ以外のプロパティーはブラウザーが設定します。

@keyframes not-knight-rider {
  from {
    left: -100px;
  }
  to {
    left: 100px;
  }
}

実行すると、画面上を移動する赤い四角形が表示され、その動作が繰り返されます。先ほど述べたように、アニメーションを完全に制御できます。四角形がどの時点にどの位置にあるかと、厳密にどのように動作するかを実際に制御するために、キーフレームを更新します (図 4 参照)。

図 4 アニメーションの制御

@keyframes not-knight-rider {
  from {
    left: -100px;
    opacity: 0;
  }
  25% {
    left: 100px;
    opacity: 0.5;
  }
  50% {
    left: -100px;
    opacity: 0;
  }
  75% {
    left: 100px;
    opacity: 0.5;
  }
  to {
    left: -100px;    opacity: 0;
  }
}

図 4 では、1 回の繰り返しの特定の時点で、キーフレームが何を行うかを定義しています。開始点 (from) と終了点 (to) を定義し、その 2 点間の継続時間の比率で特定の時点を表します。実に簡単です。しかし、創造力を発揮してすばらしいアニメーションを考え出すのは、また別の話です。

先にも述べましたが、現在の市場に出回っているさまざまなブラウザーすべてをサポートするには、適切なベンダー プレフィックスを使用する必要があります。キーフレームの場合は、@-webkit-keyframes のように指定します。

今回のコラムで取り上げたすべてのサンプルが動作しているところはオンラインで確認できます (bit.ly/I0Pa4d、英語)。また、CSS3 の対話型のハンズオン デモを紹介する一連のすばらしいシリーズもチェックしてください (bit.ly/pF4sle、英語)。このページでは、CSS のコード行を実際に記述することなく、多くのさまざまな CSS 仕様を確認できます。

上記は Windows 8 に関連するデモです。これは、Windows 8 のリリースを控え、Windows チームが新しいプログラミング モデルを導入したためです。Web の開発者は、自らのスキルと、HTML5、CSS3、および JavaScript を駆使して、Windows 8 向けのネイティブ アプリを作成できるようになります。マイクロソフトは、Web の開発者が全世界にアプリを販売できるように、まったく新たな領域を開きました。ぜひ、Windows デベロッパー センター (msdn.microsoft.com/ja-jp/windows) をご確認ください。

ソフトウェア開発者や Web 開発者などにとってはおもしろい時代です。テクノロジの進化は非常に速く、ツールボックスに新しいツールがあふれかえっています。とにかく、将来に目を向けて、自由に使えるツールや技法について理解していくことが重要です。最後に、いくつかきれいな画像を作成し、数行の CSS コードを追加して、画像に影を付けてみてください。

Clark Sell は、シカゴ郊外でマイクロソフトのシニア Web エバンジェリストおよび Windows 8 エバンジェリストとして活躍しています。彼のブログは csell.net (英語) で、ポッドキャストは developersmackdown.com (英語) で公開されており、Twitter は twitter.com/csell5 (英語) からアクセスできます。

この記事のレビューに協力してくれた技術スタッフの John Hrvatin および Brandon Satrom に心より感謝いたします。