このページの本文へ

前へ 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. コンテンツマーケ時代の必読書『Webコピーライティング教室』予約受付中 238
  2. 待望のiPhone対応、子どものネット履歴を見守る「ノートン ファミリー」 113
  3. 8限目:「キャッチコピー」の 「ピラミッド」から脱出せよ 95
  4. 9限目:情報を掘り起こす 「シャベル」のつくり方 55
  5. 現役コピーライターに学ぶ『Webコピーライティング教室』好評発売中 52
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. アドビ、日本語対応フォントをGitHubで無料配布 1203
  10. Apple Musicが流行らない理由をユーザー視点で考えてみた 1021
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング