2011年2月22日火曜日

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

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

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

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

今回のCSS3道場は、以下のような「申込みボタン」の効果的な装飾に挑戦してみよう。
・・・続きはこちら
http://ascii.jp/elem/000/000/552/552412/
─情報元:菊池 崇の実践!CSS3道場サイト様─