ボタン画像を使わずにCSSでふんわり光るロールオーバーを作ってみるしばらく更新が滞っておりましたが、久々に更新再開致します。さて、各ブラウザも HTML5 や CSS3 に対する対応が進んできていて、大手企業のウェブサイトなどでも積極的にこれらを取り入れる傾向が強まりつつあります。そんな中、CSS3 を敬遠してきた方々が気軽に入っていけるコンテンツを書けたらと以前から思っており、今回はその初回としてロールオーバーを題材にして CSS3 に軽く触れてみたいと思っております。

CSS でふんわり光るロールオーバーを作る

  1. まずは、ボタンを div 要素で普通にコーディングしてみる
  2. CSS でボタンをコーディングしてみる
  3. CSS3 を使って、まずは輪郭を角丸にしてみる
  4. ボタンに影をつけてみる
  5. 文字に影をつけてみる
  6. リンクのテキストの前に ≫(矢印)をつけてみる
  7. マウス hover 時にボタンの光を強めてみる
  8. マウス hover 時に文字の光を強めてみる
  9. マウス hover 時の変化をゆっくりと変化させてみる

1.まずは、ボタンを div 要素で普通にコーディングしてみる

さて、まずは普通に div 要素でコーディングしリンクを設定します。ここでは、ボタンの名前は「サンプル」という項目にしてみました。ここでは、div 要素の id を roll_css3 と指定してみました。

//以下のようにコーディング
 
<div id="roll_css3"><a href="#">サンプル</a></div>
 

2.CSS でボタンをコーディングしてみる

次に、CSS でボタンをコーディングします。従来だと、div の background-image に通常時とマウス hover 時のボタンをまとめた一つのボタン画像を読み込ませ、マウス hover 時に画像をずらしてロールオーバーを実装していたかと思います。今回は、タイトルにもあるように画像を一切使わずコーディングします。

ボタンの大きさは、幅120ピクセル、高さ35ピクセルで作ってみます。最初に、a 要素をブロック要素化して、幅や高さ、背景や文字色等を設定します。そして、div 要素に、line-height でa 要素に設定した高さと同じ値を設定します。

//CSSでボタンをコーディング
 
div#roll_css3 {
line-height:35px;
}
 
div#roll_css3 a {
display:block;
width:120px;
height:35px;
background-color: #F00;
color: #FFF;
text-decoration: none;
text-align: center;
}
 

ここまでで、下記のようなボタンが出来上がります。ここまでは、まだ従来のCSSしか使っていません。

3.CSS3を使って、まずは輪郭を角丸にしてみる

ここからは CSS3を使うので、一つの要素ずつ説明していきます。まずは、ボタンを角丸にしてみましょう。角丸にするには、border-radius 要素を使います。

//CSS3を使って、まずは輪郭を角丸にしてみる
 
div#roll_css3 a {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
 

a 要素に border-radius 要素に関して上記の3行を追加します。border-radius の頭についている、-webkit- や -moz- などはベンダープレフィックスと言って、CSS3 の草案段階の要素を先行実装する場合等に、拡張機能である事を明示する為につける必要があります。現段階ではつける必要のない要素もありますが、日々 CSS3 に対する対応状況が変わっていて、この記事を閲覧する時点では不要になっている可能性もありますが、ここでは便宜的につけておきます。

ベンダープレフィックスについては、後日別記事で書いていこうと思っておりますが、ここでは CSS3 をとりあえず使って覚える事を目的としていますので、あまり深く考えずにとりあえずつけて記述して頂ければと思います。

4.ボタンに影をつけてみる

次に、ボタンの影をつけてみます。ボタンに影をつけるには、box-shadow 要素を使います。今回は、ボタンの四方をぼんやりと赤く光らせてみます。尚、ここでは 2px のぼかしをいれてみました。ただ、このぼかしの見え方はブラウザによって異なりますので注意が必要です。

//ボタンに影をつけてみる
 
div#roll_css3 a {
-webkit-box-shadow: 0px 0px 2px #FF0000;
-moz-box-shadow: 0px 0px 2px #FF0000;
box-shadow: 0px 0px 2px #FF0000;
}
 

5.文字に影をつけてみる

次に、文字に影をつけてみます。文字に影をつけるには、text-shadow 要素を使います。強すぎても不自然で良くないので、今回は軽めで 1px の影をつけてみました。text-shadow については、現時点で全てのブラウザについてベンダープレフィックスが必要ないようなので、つけませんでした。

//文字に影をつけてみる
 
div#roll_css3 a {
text-shadow: 1px 1px 1px #CCC;
}
 

6.リンクのテキストの前に »(矢印)をつけてみる

次に、リンクのテキストの前に »(矢印)をつけてみます。ここでは、a:before 疑似要素を使ってみました。グローバルメニュー等には一括で指定できるので便利ですね。

//リンクのテキストの前に »(矢印)をつける
 
div#roll_css3 a:before {
content:"» " ;
}
 

7.マウス hover 時にボタンの光を強めてみる

さて、ここからマウスhover時の実装についてコーディングしていきます。まずは、box-shadow の光を強めてみます。先ほど div 要素の box-shadow の3番目に指定した 2px はぼかしの量についての指定だったのですが、これを a:hover 時に 10px を指定してみます。

//マウス hover 時にボタンの光を強めてみる
 
div#roll_css3 a:hover {
-webkit-box-shadow: 0px 0px 10px #FF0000;
-moz-box-shadow: 0px 0px 10px #FF0000;
box-shadow: 0px 0px 10px #FF0000;
}
 

8.マウス hover 時に文字の光を強めてみる

次に、hover 時に text-shadow を白く発光させてみます。今回は、最後の色の指定は新しくしてできるようになった rgba で指定してみました。色の rgb 値に加えて、アルファ(透明度)を加えて指定できます。ここでは、#fff を透明度 100% で指定してみました。コードは以下のコードを追加します。

//hover 時にテキストを光らせる
 
div#roll_css3 a:hover {
text-shadow: 0px 0px 10px rgba(255,255,255,1), 
0px -3px 10px rgba(255,255,255,1), 
0px 3px 10px rgba(255,255,255,1);
}
 

9.マウス hover 時の変化をゆっくりと変化させてみる

最後に、マウス hover 時にゆっくりと光らせたい場合、transition 要素を使う事で簡単に実装できます。これは、a 要素と a:hober 要素両方に指定します。a:hover 要素だけに指定すると、hover 時の変化はゆっくりと光りますが、マウスを外した時の変化はゆっくりと変化しないためです。両方に指定する事でこの問題は解消できます。コードは、下記の通りです。

//hover 時の変化をゆっくりと変化させてみる
 
div#roll_css3 a {
-moz-transition: box-shadow 0.7s, text-shadow 0.7s;
-webkit-transition: box-shadow 0.7s, text-shadow 0.7s;
transition: box-shadow 0.7s, text-shadow 0.7s;
}
 
div#roll_css3 a:hover {
-moz-transition: box-shadow 0.7s, text-shadow 0.7s;
-webkit-transition: box-shadow 0.7s, text-shadow 0.7s;
transition: box-shadow 0.7s, text-shadow 0.7s;
}
 

上記のように、変化させる要素名と変化させる時間を指定するのみですので簡単です。0.7s は 700ms と書く事も可能です。複数の要素を指定する時は、カンマで区切るだけです。これまでのコードを全てまとめると、以下のコードになります。

//最終的なコード
 
#roll_css3 {
line-height:35px;
}
 
div#roll_css3 a {
display:block;
width:120px;
height:35px;
background-color: #F00;
color: #FFF;
text-decoration: none;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 2px #FF0000;
-moz-box-shadow: 0px 0px 2px #FF0000;
box-shadow: 0px 0px 2px #FF0000;
text-shadow: 1px 1px 1px #CCC;
-moz-transition: box-shadow 0.7s, text-shadow 0.7s;
-webkit-transition: box-shadow 0.7s, text-shadow 0.7s;
transition: box-shadow 0.7s, text-shadow 0.7s;
}
 
div#roll_css3 a:hover {	
-webkit-box-shadow: 0px 0px 10px #FF0000;
-moz-box-shadow: 0px 0px 10px #FF0000;
box-shadow: 0px 0px 10px #FF0000;
text-shadow: 0px 0px 10px rgba(255,255,255,1), 
0px -3px 10px rgba(255,255,255,1), 
0px 3px 10px rgba(255,255,255,1);
-moz-transition: box-shadow 0.7s, text-shadow 0.7s;
-webkit-transition: box-shadow 0.7s, text-shadow 0.7s;
transition: box-shadow 0.7s, text-shadow 0.7s;
}
 
div#roll_css3 a:before {
content:&quot;» &quot;;
}

ベンダープレフィックスが不必要なものを削ればもう少しコードが短くなるかもですが、現状ではやむを得ない状況です。ただ、意外と簡単に CSS3 が使える事が確認できたと思います。

これからは、少しずつ HTML5 と CSS3 の記事も書いていこうと思っております。CSS3 はできる事が増えましたが、覚える事が多く一気に覚えようとすると大変なので、一つずつ使って覚えていく事がマスターへの近道かと思います。それでは、今回はこの辺りで。