3)がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。CSS3を使うと従来は画像やスクリプトを使わないとできなかった表現が、スタイルシートだけでできるようになる。デザイン表現の自由度を広げ、マークアップの効率を上げるのがCSS3だ。本連載ではCSS3を使ったデザインTipsをサンプルとともに紹介する。「申し込みボタン」や「キャンセルボタン」などのボタンは、Webのユーザーインターフェイスの中でも重要な要素の1つだ。テキストや他の要素に埋もれてユーザーが操作に迷わないように、画像を使って凝ったデザインにすることが多い。CSS3を使えばテキストだけでも画像に引けを取らないボタンを手軽に作成できる。画像を用意する手間が減るうえに、CSSプロパティやHTMLを変更するだけで色を変えたり文字を書き換えたりできるので、修正や流用も画像編集ソフトを使うより効率的だ。今回のCSS3道場は、以下のような「申込みボタン」の効果的な装飾に挑戦してみよう。5.0で表示)装飾するボタンのHTMLは、以下のようにul/li要素でマークアップしたシンプルなものを用意した。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を適用できる「コンディショナルコメント」を利用して別のデザインを提供することも検討しよう。transformならバッジも5分で作れる!画像ソフトを使ってデザインしていたパーツも、CSS3なら簡単なコードですぐにデザインできる。イベントの告知などで活躍する楕円形の「バッジ」を作ってみよう。DESIGNCSS3を駆使してTwitter風のふきだしを作るコメントを表示するときに効果的な「スピーチ・バブル」(ふきだし)のデザイン。CSS3なら画像を一切用意することなく、スタイルシートだけで作れる。DESIGN10分でできる、海外Webデザイン風テクニック海外のWebサイトでよく見かけるのが、紙の端を折り込んだような「ドッグイヤー(dogeared)デザイン」だ。CSSの擬似クラスを利用して再現してみよう。DESIGNbox-shadowを極めて「Mac風UI」を作る!box-shadowプロパティを使うとボックスに対して簡単にシャドウを適用できる。box-shadowプロパティをWebデザインに取り入れる具体的な方法を紹介しよう。DESIGNtext-shadowで作る「見出し」デザインのアイデアtext-shadowはCSS3の中でもっとも基本的なプロパティだが、アイデア次第で大きな効果を得られる。リッチな「見出し」をデザインしてみよう。DESIGNもう画像は要らない!CSS3で作る申し込みボタンCSS3を使ったデザインTipsをサンプルとともに紹介する新連載。第1回はCSS3の新しいプロパティを駆使して「申し込みボタン」をデザインする。この記事の編集者は以下の記事をオススメしていますDESIGNGoogleも採用!CSS3実践テクニックCSS3はもはや実験段階ではなく実践段階になりつつある。崇氏がナビゲーションメニューを例に、現場で使える実践テクニックを紹介する。00DESIGNHTML5/CSS3で作るスマートフォンサイトの基本スマートフォンサイトの制作方法を実際のプロジェクトの流れに沿って解説。Photoshopでデザインカンプを作成して基本のHTML/CSSをコーディングしよう。スマホお気に入り一覧マイページ。