このページの本文へ

前へ 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. クラウドは地方を救うか?KDDIウェブら「Cloud ON OKINAWA」を立ち上げ 4
  2. GoogleやLINEみたいなSMS二要素認証をTwilioでサクッと実装してみよう 2
  3. 「使いやすい」と言われたい!WordPressの編集画面にメタボックスを追加する方法 2
  4. PHPはマルチスレッド化で爆速化できるか? pthreadsの使い方(基礎編) 2
  5. 【週末まとめ読み】レスポンシブをメディアクエリなしで実現する5つのCSSトリック 1
  6. 商業写真で首切りと串刺しがダメな理由 2324
  7. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  8. Sketch 3を使う3つの理由と10の魅力 633
  9. ボーナス支給日確定で新聞社を辞めた人に贈る本 551
  10. 5限目:「情報」を「コンテンツ」に変える 告知コピー制作メソッド 396
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング