CSS3（Cascading Style Sheets,level 3）がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。CSS3を使うと従来は画像やスクリプトを使わないとできなかった表現が、スタイルシートだけでできるようになる。デザイン表現の自由度を広げ、マークアップの効率を上げるのがCSS3だ。本連載ではCSS3を使ったデザインTipsをサンプルとともに紹介する。
「申し込みボタン」や「キャンセルボタン」などのボタンは、Webのユーザーインターフェイスの中でも重要な要素の1つだ。テキストや他の要素に埋もれてユーザーが操作に迷わないように、画像を使って凝ったデザインにすることが多い。
CSS3を使えばテキストだけでも画像に引けを取らないボタンを手軽に作成できる。画像を用意する手間が減るうえに、CSSプロパティやHTMLを変更するだけで色を変えたり文字を書き換えたりできるので、修正や流用も画像編集ソフトを使うより効率的だ。
今回のCSS3道場は、以下のような「申込みボタン」の効果的な装飾に挑戦してみよう。
今回のお手本
|
|---|
| 今回のお手本。画像を一切使用せずにCSS3だけでデザインできる（Mac OS X 10.6/Safari 5.0で表示） |
装飾するボタンのHTMLは、以下のようにul/li要素でマークアップしたシンプルなものを用意した。
■ベースのHTML
<ul>
<li><a href="">お申し込み</a></li>
</ul>
Internet Explorerへの対応
CSS3を実際に使用するときに気になるのは、サポートが遅れているInternet Explorer（IE）、特にIE6への対応だろう。米StatCounterのデータによると、IE6の利用シェアは6％以下（日本国内、2011年1月現在）となっており、対応コストを考えるとIE6への対応はそろそろあきらめざるを得ない状況になりつつある。
米StatCounterにおける、日本でのブラウザーシェア（2009年11月〜2010年11月）。StatCounterは手軽にブラウザのシェアを調べられるツールだ
一方、IE7/IE8についても、Safari/Opera/Firefox/Chromeとまったく同じデザインにこだわる必要はない。必要なのは、IE7/IE8でも破綻しないデザインを提供することだ。IE7/IE8向けには、特定のバージョンのIEにだけCSSを適用できる「コンディショナルコメント」を利用して別のデザインを提供することも検討しよう。
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
