クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント：一撃デザインの種明かし（15）（1/2 ページ）

IE 9が登場！ ユーザーの閲覧環境がますます多様化！

　4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。

Internet Explorer 9がついに登場！

Twitter：登録フォーム（上： IE 9／下：IE 6）

YouTube：検索結果画面（上：IE 9／下：IE 7）

アップル：Macの製品ページ（SafariかChromeで見ると、アニメーションします）

　それ以外のブラウザで見ると、アニメーションなしでMacのラインアップが表示されますが、もちろん通常のブラウジングに支障はありませんので、プログレッシブ・エンハンスメントの概念に沿っています。

プログレッシブ・エンハンスメントでサイトを作ってみよう

　それでは実際に、プログレッシブ・エンハンスメントの概念を取り入れたサイトを作っていきましょう。本稿ではCSS3をメインに題材として取り上げ、実際のコードを交えて解説していきます。

ボタンを作ってみよう

　Webサイトを構築するにあたって、ボタンは最も頻繁に使う部品だと思います。これまでのWeb制作では、グラデーションや角丸などリッチな表現のボタンを作るには画像を使う必要がありました。

　しかし、CSS3を使えば、このようなボタンも画像を使わずに作成できます。

クリックすると、ボタンがへこむ

　画像を使わずにCSSだけで作ったボタンは、テキストエディタだけで編集ができるので、作業効率の向上が期待できます。また、CSSファイルで管理できるので、一括で表現の変更ができ、メンテナンス性が高まるなど、多くの利点があります。

　このボタンを作っているHTMLとCSSのコードは以下のようになっています。実際にはCSS3のプロパティは「-webkit-」、「-moz-」などのベンダプレフィックスを付ける必要があります（詳細は後述）。

#btn {
    position: relative;
    display: block;
    width: 200px;
    padding: 15px 0;
    text-align: center;
    cursor: pointer;
    　　　
    color: white;
    text-decoration: none;
    line-height: 1;
    font-weight: bold;
    letter-spacing: 3px;
    text-shadow: -1px -1px 1px #C60;　// CSS3プロパティ
    border-radius: 10px;　// CSS3プロパティ
    box-shadow: 0 5px 1px #C60, 0 7px 5px #CCC;　// CSS3プロパティ
  }
  #btn:link, #btn:visited { background: #F70; }
  #btn:hover { background: #FB3; }
  #btn:active {
    background: #FC2;
    box-shadow: 0 0 1px #871, 0 2px 2px #CCC;　// CSS3プロパティ
    top: 5px;
  }

　また、コードの実行結果を以下から確認できます。

　上に示したテキストボックスでは、角丸やグラデーションなどのCSS3プロパティの他に、「:focus」疑似クラスを用いて、テキストボックス入力中のデザインを指定しています。角丸やグラデーション、「:focus」疑似クラスの使えないブラウザでも最低限機能するようCSSを設定しています。

　上に示した見出しでは、アイコン部分がアニメーションで回転します。CSS3のアニメーションを用いているため、CSS3非対応のブラウザでは回転しませんが、問題なく閲覧できます。

　これらのように、プログレッシブ・エンハンスメントの概念でサイトを制作すると、新しい技術を積極的に使えるため、リッチな表現を手軽に行えます。