インタラクティブな反応で操作をよりわかりやすいものに

紙やiPadなどのタッチパネル端末は、そのもの自体を触ってインターフェースを操作できますが、Webサイトはそれができません。マウスやトラックパッドを使って、モニタの中のカーソルの座標を、相対的に上下左右に動かすことで画面の中を移動・操作しなければなりません。

そのため、リンクやボタンにマウスオーバーした際に、クリックできる状態であることをユーザーに示す必要があります。そうした理由から、OSの場合はカーソルが矢印から手のアイコンに変わります。

ただ単にカーソルを変化させるだけでなく、テキストリンクやボタンなどクリックできる箇所にhover処理を加えると、よりわかりやすいインターフェースとなります。hover時に、テキストリンクの色が変わったり、下線が引かれたり、ボタンの色が変わったりするデザインが一般的になっていますが、今回はよりインタラクティブなインターフェースにする方法をご紹介します。

今までは、メニューにマウスオーバーした際に背景色が右に伸びたり、ふわっと色が変化する処理にはFlashかJavaScriptを使う必要がありました。しかし、CSS3では、transitionプロパティによって同様のアニメーションを表現できます。

transitionプロパティの対応ブラウザは以下の通りです。

• Firefox 4.0以上
• Google Chrome 3.0以上
• Safari 3.2以上
• Opera 10.5以上

実装のポイント

それでは実装方法を見ていきましょう。

まずはXHTMLの部分です。ここはul、liのリストで、シンプルにメニューを生成しているだけです。

<div id="wrap">
<h1><img src="img/logo.gif" alt="transition" width="510" height="60" /></h1>
  <ul class="menu">
    <li><a href="#">HTML5</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">gradient</a></li>
    <li><a href="#">background-size</a></li>
    <li><a href="#">transition</a></li>
    <li><a href="#">border-radius</a></li>
  </ul>
</div>

次はCSSを見てみましょう。

ul.menu {
	margin:70px 0 0 0;
}
ul.menu li {
	margin: 10px 0 0 0;
}
ul.menu li a {
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	color: #000;
	margin:0 0 20px 0;
	padding: 5px 15px 5px 0;
	width: 100px;
	display: block;
	text-decoration: none;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
}
ul.menu li a:hover {
	background: #000;
	color: #fff;
	width: 500px;
	padding: 5px 15px 5px 10px;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
}

ポイントは、transitionプロパティを以下の3種類に分けて指定しているところです。それぞれ、Safari用、Opera用、mozilla系ブラウザ用となります。

• -webkit-transition
• -o-transition」
• -moz-transition

細かい指定をしているのが「all」「⁠0.2s」「⁠ease-out」の部分です。

まず「all」は「どのCSSプロパティに対してtransitionを適用するか」を表しています。all以外に、以下のものが選択できます。

• all
• background
• color
• height
• width
• outline

「0.2s」は、「⁠transition-duration」の値で、何秒かけてアニメーションするかを指定しています。ここでは0.2なので、0.2秒かけてアニメーションすることになります。

最後の「ease-out」は、「⁠transition-timing-function」の値で、減速する動きを表します。以下のものから選択できます。

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier

ここで実装しているアンカーとa:hoverの値の違いは、以下の通りです。

このように、通常のアンカーとa:hoverの値を変えることで、アニメーションさせることができるのです。

アニメーションはFlashを使えば簡単に実装できますが、CSS3ならばJavaScriptでプログラミングをしなくても様々な表現が可能になります。ブラウザ対応状況がまだまだな感は否めないですが、今のうちにCSS3による表現を知っておくと、ブラウザの進化が進んだときに役に立つでしょう。