このページの本文へ

DESIGN 菊池 崇の実践!CSS3道場 ― 第1回

もう画像は要らない!CSS3で作る申し込みボタン

2011年01月18日 11時00分更新

菊池 崇

  • この記事をはてなブックマークに追加
本文印刷

CSS3(Cascading Style Sheets,level 3)がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。CSS3を使うと従来は画像やスクリプトを使わないとできなかった表現が、スタイルシートだけでできるようになる。デザイン表現の自由度を広げ、マークアップの効率を上げるのがCSS3だ。本連載ではCSS3を使ったデザインTipsをサンプルとともに紹介する。

 「申し込みボタン」や「キャンセルボタン」などのボタンは、Webのユーザーインターフェイスの中でも重要な要素の1つだ。テキストや他の要素に埋もれてユーザーが操作に迷わないように、画像を使って凝ったデザインにすることが多い。

 CSS3を使えばテキストだけでも画像に引けを取らないボタンを手軽に作成できる。画像を用意する手間が減るうえに、CSSプロパティやHTMLを変更するだけで色を変えたり文字を書き換えたりできるので、修正や流用も画像編集ソフトを使うより効率的だ。

 今回のCSS3道場は、以下のような「申込みボタン」の効果的な装飾に挑戦してみよう。

今回のお手本

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]-->


Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

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

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

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

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

ランキング