| web creators特別号 |
| HTML5・スマートフォン・SNS・Webアプリケーション Webサイト制作最新トレンドの傾向と対策 |
Webデザイン 1-07
CSS3だけでボタンをつくる
CSS3においてはコーディングだけで高い表現力を獲得し、 これまで画像に頼るしかなかった部分も表現することが可能となった。 ここではボタンを作りながらCSS3のプロパティを紹介していく。
制作・文／藤沢立也（Suika Cube Inc.）
Browser Firefox 4over Safari 5over Chrome 9over
01
まず標準的なボタンを１つ作成してみる。Buttonタグで単純なボタンを設定し、これにサイズ、枠線、文字色などを既存のCSSで描画して基本となるボタンを完成させる【1-1】。ここからCSS3を駆使して美しいボタンを作成してみよう。
【1-1】まず最初にシンプルなボタンを一つ作る。サイズ、ボーダー、テキスト、色などのプロパティは自由に設定しよう。
02
まず四角いボタンの角を丸くすることでボタンに柔らかい印象を与える。ここで設定するのはブロック要素の角を丸くするborder-radiusプロパティだ。今まで画像やスクリプトで無理に作っていた角丸だが、CSS3においては僅かなコードで角を丸くすることができる【2-1】。
これらにはブラウザことにベンダープレフィックスを付ける必要がある【2-2】。
【2-1】border-radius（左上横半径,右上横半径,右下横半径,左下横半径/左上縦半径,右上縦半径,右下縦半径,左下縦半径）・・・値には角を丸めた時の円の半径を入力。marginのようにまとめて指定可。例では全てまとめて指定している。角ごとに細かく指定したい場合はborder-top-left-radius（左上）・border-top-right-radius（右上）・border-bottom-left-radius（右下）・border-bottom-right-radius（左下）を使えば、それぞれのコーナーごとの角丸を指定可能だ。
【2-2】ベンダープレフィックスとはブラウザがまだ正式実装ではない機能（草案）を実装する際、それがまだ先行した機能であることを明示するために付ける識別子。ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子でブラウザの種類を特定する。
例） -moz-border-radius: 5px;// Firefox用
ただし、その機能が草案から勧告候補になった際は外すことが推奨される。将来的にはベンダープレフィックスがあると逆に動作しなくなる場合もあるので、実際に実装する際はベンダープレフィックスなしのプロパティも併記しておくとよい。
03
続いて色をつけていく。CSS3では要素に美しいグラデーションを適用できるようになった。Firefoxではlinear-gradient関数を、SafariやChromeなどのwebkit系ブラウザではgradient関数をbackgroundプロパティに指定することで背景色をグラデーションに指定できる【3-1】。
グラデーションの中間の色も細かく指定できるので、ここではボタンにハイライトを設定してみる。
【3-1】線形グラデーション（直線的なグラデーション）を設定する関数は、現時点ではブラウザによって異なる関数になっている。
■FireFox・・・linear-gradient(方向や角度, 開始色, 途中色, 位置 終了色)
■webkit系ブラウザ（Safari,Chrome）・・・gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色))
開始位置はtop,bottomなどのキーワードなどで指定できる、途中色はいく つも設定できるので細かいグラデーションも可能だ。なお色の指定部分に関してはrbgaを使ってアルファ値を指定することにより透過グラデーションも可能だ。
04
次はテキストとボタンに影をつけて立体感を出してみよう。テキストにはtext-shadowプロパティ【4-1】、ボタンはbox-shadowプロパティで簡単にドロップシャドウを適用することができる【4-2】。
ドロップシャドウのポイントはあまりかけすぎないこと。あまりかけ過ぎると不自然な感じになるので、隠し味的に使おう。
【4-1】text-shadow(横方向の長さ,縦方向の長さ,ぼかし距離,色)はテキストに影をつけるプロパティだ、1つめと2つめの値でサイズを決め、３つめの値でぼかしを設定する。４つめで色を指定する。なお「,」で区切ることにより複数の影を指定可能だ。
【4-2】box-shadow(横方向の長さ,縦方向の長さ,ぼかし距離,広がり,色)は要素に影をつけるプロパティだ、1つめと2つめの値でサイズを決め、３つめの値でぼかしを設定する。４つめは全体の影のサイズを拡張する。５つめで色を指定する。なお最後にinsetを追加すると内向きの影になる。text-shadowと同じく「,」で複数指定可能。
05
ロールオーバーも画像を二枚作ったりする手間もなく簡単に実装できる。hover擬似クラスに色々指定することで簡単にデザインの変化を与えられる。例えばopacityプロパティでボタンの透明度を変更すればあっという間にロールオーバーができあがる【5-1】。もちろんグラデーションの方向を反対にしたり【5-2】、円形グラデーションを使ってボタンが点灯するような感じのロールオーバーも面白い【5-3】。工夫次第でさまざまなボタンを簡単に作れるようになる。
HTMLでは構造と外見を分離させるという理念に基づいて、とりあえずHTMLから外見の設定要素としてCSSを分離したが、サイトを美しくデザインするためには結局画像を駆使しなければ難しかった。しかしCSS3になってコードだけできちんとデザインすることがようやく現実的になってきた。
ブラウザによって関数が異なったり、ベンダープレフィックスの存在やIEのように対応には程遠いブラウザの存在などもあるのでまだまだ実用段階とは言えないが【5-4】、ようやくCSSによる本当の「ウェブデザイン」が出来るようになり始めたという印象だ。
【5-1】opacity（透明度）は要素の透明度を設定する。1が不透明で0が完全に透明になるので、その間で透明度を指定できる。
【5-2】グラデーションの方向変えるだけで簡単に設定できる。
【5-3】円形グラデーションを設定する関数は、現時点ではブラウザによって異なる関数になっている。
■Firefox・・・radial-gradient(方向や角度, 形状 サイズ,開始色, 途中色, 位置 終了色)
■webkit系ブラウザ（Safari,Chrome）・・・gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色))
開始位置はtop,bottomなどのキーワードなどで指定できる、形状やサイズに関してはブラウザで異なるが、Firefoxの場合、形状はcircle(正円) elipse(楕円 デフォルト),サイズは以下の範囲を指定できるclosest-side(要素の一番近い辺) closest-corner(要素の一番近い角) farthest-side(要素の一番遠い辺) farthest-corner(要素の一番遠い角)contain(要素内に収める) cover(要素全体を覆う デフォルト)。
【5-4】本項で扱った項目のIEでの対応状況。ようやくIE9になり一部CSS3に対応を始めたが、まだまだその表現力の全てを表示するということにはほど遠い。それ以前のIEは問題外といえよう。
[目次に戻る]
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。
※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。
