このページの本文へ

前へ 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 次へ

ソーシャルランキング
  1. 全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選 164
  2. これなら作れる!WordPressプラグイン開発に役立つ記事まとめ 62
  3. 9限目:情報を掘り起こす 「シャベル」のつくり方 11
  4. コンテンツマーケティングのセミナーに行く前に読んでおきたい記事8選 10
  5. 【週末まとめ読み】Google Fontsのぶっちぎりな進化に驚いた! 3
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1021
  10. 「シングルページ」流行の7つの理由と最新事例まとめ 705
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング