Webデザイン最新トレンド ~イマドキUIのつくりかた

第11回 CSS3でアニメーションするメニューを作る

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

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

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

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

図1 マウスオーバー時に変化するカーソルアイコン。ただ,これだけでは物足りない

図1 マウスオーバー時に変化するカーソルアイコン。ただ,これだけでは物足りない

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

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

図2 完成図。hover時に背景色が右に減速しながら伸びる

図2 完成図。hover時に背景色が右に減速しながら伸びる

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

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

実装のポイント

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

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

XHTMLソース

<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を見てみましょう。

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
padding: 5px 15px 5px 0;→ padding: 5px 15px 5px 10px;
color: #000;→ color: #fff;
width: 100px;→ width: 500px;
background指定なし→ background: #000;

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

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

今回解説したサンプルファイルがダウンロードできます。

著者プロフィール

川下城誉(かわしもくにたか;CREAMU)

Web制作・ブランディングを主軸とした(株)CREAMU 代表取締役。海外のWeb情報を紹介するblog「CREAMU」を運営中。

URLhttp://www.creamu.co.jp/

コメント

コメントの記入