実験から実践段階へ
Googleも採用！CSS3実践テクニック
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が隠れている。
 |
|---|
| Google検索のトップページ |
 |
|---|
| 「Google Search」ボタンと「I`m Feeling Lucky」ボタンを拡大。この2つのボタンにCSS3が使われている |
SafariのWeb開発ツール「Web Inspector」でボタン部分のCSSを見ると、CSS3の-webkit-gradientでグラデーションが設定されているのが分かる。具体的な実装方法は後述するが、多くのユーザーが利用するグーグルがすでにCSS3を採用していることがおどろきだ。
 |
|---|
| Web Inspectorで見ると「-webkit-gradient」が指定されているのが分かる |
CSS3はもはや「実験レベル」ではなく、「実践レベル」に移りつつある。本稿では、以下のようなナビゲーションバーを題材に、CSS3をWeb制作に活用するテクニックを紹介する。
■本稿で作成するCSS3のサンプル
 |
|---|
| 作成するナビゲーションバー。一見すると画像のように見えるが、背景のグラデーション、文字のドロップシャドウをCSS3のプロパティで設定している。Safari4.0で表示 |
 |
|---|
| マウスオーバーするとボタンの色がアニメーション付きで変更される |
