Googleも採用!CSS3実践テクニック

文●菊池 崇/Web Directions East代表

2009年11月24日 14時00分


 「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer(IE)を除く主要なWebブラウザー(Safari/Firefox/ Opera/Google Chrome)は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。


Googleの検索ボタンに注目する

 「Google?」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。


 SafariのWeb開発ツール「Web Inspector」でボタン部分のCSSを見ると、CSS3の-webkit-gradientでグラデーションが設定されているのが分かる。具体的な実装方法は後述するが、多くのユーザーが利用するグーグルがすでにCSS3を採用していることがおどろきだ。


 CSS3はもはや「実験レベル」ではなく、「実践レベル」に移りつつある。本稿では、以下のようなナビゲーションバーを題材に、CSS3をWeb制作に活用するテクニックを紹介する。

■本稿で作成するCSS3のサンプル



ブラウザーによって異なるCSS3の実装

 作業に入る前にCSS3の実装状況を確認しておこう。よく使われる4つのCSS3プロパティについて、ブラウザーごとの対応状況をまとめたのが下の表だ。


 Firefox、Chrome、Safariの欄にある-moz-、 -webkit-は「ベンダープリフィックス」と呼ばれるもので、W3Cで正式勧告されていないプロパティの先行実装やブラウザー固有機能などで使われる。ブラウザーを識別する接頭辞を付けることで、適用するブラウザーを絞り込めるわけだ。ベンダープリフィックスは下記のようにプロパティ名の頭に付けて使用する。


-moz-text-shadow



ドロップシャドウ効果を適用する

 はじめに、メニューのテキストに影を付けるドロップシャドウ効果を設定してみよう。ドロップシャドウはtext-shadowプロパティで設定できる。


【text-shadowの基本】


ul li a{
    text-shadow: 0px 1px 0px #ccc;
    }


左から、

  • 1つ目の値は、右方向への影の移動距離(負の値だと左方向に移動する)
  • 2つ目の値は、下方向への影の移動距離(負の値だと上方向に移動する)
  • 3つ目の値は、影をぼかす範囲
  • 4つ目の値は、影の色(rgbaを利用できる)

を指定する。

 text-shadowプロパティを使うコツは、あまり大きな値を設定しないこと。右方向は0、ぼかしも0、下方向にだけ1pxずらした影を設定したのが次のサンプル。文字が浮き上がったように表示され、効果的なドロップシャドウを実現できた。


text-shadow: 0px 1px 0px #ccc;




つややかなグラデーションをCSS3で表現する

 CSS3では、backgroundプロパティの値に「gradient」を設定することで背景にエレガントなグラデーションを設定できる。gradientを使えば数値を変更するだけでグラデーションを自由に変更できるので、画像編集ツールで画像ファイルを何度も調整するより断然便利だ。

 gradientは、Safari4.0以降とFirefox 3.6以降で利用できるが、記述方法は以下のように異なっている。

【gradientの基本】(Safari4.0以降)


-webkit-gradient(linear, 開始位置, 終了位置, color-stop(色を追加する位置, 追加する色));


【gradientの基本】(Firefox3.6以降)


-moz-linear-gradient(開始位置, 終了位置,from(開始時の色),
                                   color-stop(色を追加する位置, 追加する色),
                                   to(終了時の色));


 開始位置/終了位置は、位置キーワード(top/bottom/left/right/center)または数値(ピクセルなど)で指定する。color-stopはグラデーションの途中に色を追加する引数で、いくつでも追加できる。色を追加する位置は%で指定する。色の指定には、透明度を設定できるrgba()が使える。

 今回のサンプルでは、backgroun-colorプロパティで背景を塗りつぶしておき、その上に段階的に上方向から下方向にかけて10%ずつ濃くしたグラデーションマスクを重ねている。また、マウスオーバー(:hover)時にはgradientの値を変更し、より濃いグラデーションにしている。


■通常時のナビゲーションバー


/*mozilla 3.6+ グラデーション マスク*/
    background-image: -moz-linear-gradient(top, bottom, /*上から下にグラデーション*/
                                   from(rgba(255, 255, 255, .2)), /*透明度 80%*/
                                   color-stop(10%, rgba(255, 255, 255, .3)), /*上から10%に透明度 70%*/
                                   to(rgba(255, 255, 255, .4)));/*透明度 60%*/
/*Safari4.0+ グラデーション マスク*/
    background-image: -webkit-gradient(linear, left top, left bottom,/*上から下にグラデーション*/
                                   color-stop(0, rgba(255, 255, 255, .2)), /*透明度 80%*/
                                   color-stop(50%, rgba(255, 255, 255, .3)),/*透明度70%*/
                                   color-stop(90%, rgba(255, 255, 255, .4)));/*透明度60%*/
}



■マウスオーバー時のナビゲーションバー(:hover)


/*mozilla 3.6+ グラデーション マスク*/
    background-image: -moz-linear-gradient(top, bottom,
                                   from(rgba(255, 255, 255, .1)),
                                   color-stop(10%, rgba(255, 255, 255, .2)),
                                   to(rgba(255, 255, 255, .3)));
/*Safari4.0+ グラデーション マスク*/
    background-image: -webkit-gradient(linear, left top, left bottom,
                                   color-stop(0, rgba(255, 255, 255, .1)),/*透明度 90%*/
                                   color-stop(50%, rgba(255, 255, 255, .2)), /*透明度 80%*/
                                   color-stop(90%, rgba(255, 255, 255, .3)));/*透明度 70%*/
}



アニメーションを実装する

 CSS3ではマウスオーバー時にアニメーション効果を付けられる。CSS3がまだ実験レベルで使われていた2008年頃は過激なアニメーションサンプルも見られたが、今回は実用的なアニメーションを実装しよう。

【マウスオーバー時のアニメーション】


ul li a{
    -webkit-transition: background-color 0.4s liner;        
}


 アニメーションは-webkit-transitionプロパティで設定する。-webkit-transitionプロパティは左から

  • 1つ目の値は、適用されるプロパティ
  • 2つ目の値は、アニメーションにかかる時間
  • 3つ目の値は、アニメーションの種類(ease/linear/ease-in/ease-out/ease-in-out/cubic-bezierから選択、参考リンク

を指定する。

 ポイントはアニメーションにかかる時間にあまり大きな値を設定しないこと。必要以上に時間がかかると、ユーザーはフラストレーションを感じてしまう。著者が検証した限りでは、約0.4秒程度が適当なようだ。

 また、セレクターはul li a:hover{}と記述するとアニメーションがちらついてしまうため、必ずul li a{}と記述する。

 実際の表示結果(Safari 4.0)は以下の動画で確認できる。

ASCII Googleも使っている CSS3 from satoshi on Vimeo.

 なお、transitionプロパティが使えるのは現在のところSafari 4.0のみだが、今後は次期Operaでもサポートが予定されている。


各ブラウザーでの表示結果を検証する

 最後に、ここまでに紹介したCSS3の機能を使ったサンプルを各ブラウザーで表示してみよう。

CSS3を使ったナビゲーションバーのサンプル



 冒頭でも説明したとおり、CSS3はブラウザーによって実装度合いが違うので、当然ながら表示結果は同じにはならない。そもそもCSS3はブラウザーでの実装の違いを想定して「モジュール化」されており、ブラウザーが実装するモジュールを選択できるようになっている。同じ表示結果にはならないのは当然なのだ。

 とはいえ、わずかな表示の違いでユーザーが情報やサービスにアクセスできなくなることはない。すべてのブラウザーで同じ表示結果を目指すという考えにさえこだわらなければ、CSS3はすでにもう実践レベルなのだ。

プロに学ぶCSS3の実践講座が開講!


 現役Webクリエイターが現場で使えるノウハウを直接指導する「allwebクリエイター塾」では、CSS3の集中講座を開催します。講師は、本稿の著者・菊池 崇氏。Webフォント、カラーマネジメント、アニメーションなど、CSS3を使った先進的なデザインからIE対策まで、実践的なテクニックを解説します。詳細は、allWebクリエイター塾のWebサイトからご確認ください。

「CSS3を利用した一歩先行くCSSデザイン講座」

  • 日時 11月29日(日) 9:00〜18:00(全8時間)
  • 料金 3万円
  • 定員 10名
  • 会場 中央区ハイテクセンター(八丁堀駅より徒歩1分)
  • 講師 菊池 崇氏(Web Directions East代表)

■関連記事