このページの本文へ

前へ 1 2 3 4 次へ

実験から実践段階へ

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

2009年11月24日 14時00分更新

菊池 崇/Web Directions East代表

  • この記事をはてなブックマークに追加
  • 本文印刷

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


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

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

Google
Google検索のトップページ
「Google Search」ボタンと「I`m Feelin Lucky」ボタンを拡大。2つのボタンにCSS3が使われている
「Google Search」ボタンと「I`m Feeling Lucky」ボタンを拡大。この2つのボタンにCSS3が使われている

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

Google
Web Inspectorで見ると「-webkit-gradient」が指定されているのが分かる

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

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

Safari
作成するナビゲーションバー。一見すると画像のように見えるが、背景のグラデーション、文字のドロップシャドウをCSS3のプロパティで設定している。Safari4.0で表示
マウスオーバー
マウスオーバーするとボタンの色がアニメーション付きで変更される

前へ 1 2 3 4 次へ

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング