web creators特別号

いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア

HTML5＆CSS3 4-07
ボタンの表現に使えるCSS3の機能いろいろ

角丸、グラデーション、ドロップシャドウなど、CSS3を利用すると画像を使わずにリッチなデザインのボタンを作成できる。ここでは、ボタンのデザインを例にこれらのプロパティを紹介しよう。

制作・文／田中俊之（ビヨンド・パースペクティブ・ソリューションズ株式会社）

BROWSER IE…10over　Firefox…4over　Safari…5over　Chrome…9over

01

ボタンは<button>タグを使うと簡単に作ることができるが、通常はサイトのイメージに合わせて独自にボタンを用意することが多い。

ボタンを作る手段として一般的なのはボタン用の画像を用意する方法である。自由にボタンのデザインを作り込めるメリットがあるが、修正のたびに作業が発生するという問題がある。だが、CSSのみでデザインしたボタンであればサイズ変更も容易であり、レイアウトの変更にも柔軟に対応できる。

以前は、シンプルなデザインしかできなかったが、CSS3では多彩な表現が可能となっている。そのいくつかを紹介しよう。

02

今回作るボタンのベースとして【2-1】のHTMLを使う。ブラウザで表示したものが【2-2】だ。現状は、単純な長方形のボタンである。


【2-1】シンプルな長方形のボタンサンプル。


【2-2】【2-1】の表示例。

03

まずはボタンの角を丸くしてみよう。CSS3ではborder-radiusを使うことで要素の角を丸くすることができる。

border-radiusをシンプルに使うには長さの値を１つ指定すればよい。

するとその半径を持つ円の丸みで4 隅が丸みを帯びる。たとえばCSSに【3-1】、HTMLに【3-2】と記述すると、【3-3】のようなボタンになる。


【3-1】CSSの記述。ブラウザごとにベンダープレフィックスの属性名が違うためやや複雑に見えるかもしれないが、指定している内容自体は同じである。


【3-2】HTML の記述。


【3-3】四隅の角が丸く表示される。

04

03の角丸は、4 隅すべての丸みについて水平／垂直方向の半径を指定することもできるので、ボタンのwidth, heightとうまく連携をとれば楕円【4-1】【4-2】や円【4-3】【4-4】のようなボタンを作ることもできる。

border-radiusを使う場合の注意点を挙げるとすれば、丸みが多少ぎざついて見えることだろう。丸くする要素が大きい場合はそれほど目立たないが、小さい場合は少し気になるかもしれない。

このあたりについては、実際に試して調整する必要がある。


【4-1】楕円を表示するHTML＋CSSの記述。


【4-2】楕円が表示される。


【4-3】円を表示するHTML＋CSSの記述。円にしたい要素の円が表示される。widthとheightが同じ値になるように変更した後、楕円のCSS を適用する。


【4-4】円が表示される。

05

次に、ボタンに影をつけて立体感を表現してみよう。ひと目でクリッカブルな要素であることがわかるようになるのでユーザビリティの向上も期待できる。

ボタンに影をつける場合はbox-shadow属性を使う。

具体的には【5-1】【5-2】のように4 つの長さと1つの色を指定して使う。長さは、影の水平／垂直の移動距離、ぼかしの距離、広がりの距離を意味する。

insetと指定をすると内側に影をつけることができるため、沈み込んだボタン、または、押されたボタンという表現も可能である【5-3】【5-4】。

広がりの距離については、イメージがつかみにくいが、影の移動距離を指定せずに使ってみるとわかりやすい【5-5】【5-6】。

特殊な使い方としては、外側と内側の両方に影を表示することもできる【5-7】【5-8】。

box-shadowを使う際の注意点は、他の要素に影がかかると影が切れてしまうことだ。そのため、使用する場合は他の要素との間隔に気を配る必要がある。

誌面では、スペースの都合もあり画像が小さく、影が見づらいかもしれないので、サンプルも参照しながら確認してほしい。


【5-1】影を表示するHTML＋CSS の記述。


【5-2】ボタンに影が表示される。


【5-3】insetと指定したHTML＋CSS の記述。


【5-4】影が左上から内側に向けて表示される。


【5-5】影の移動距離を指定しない場合のHTML＋CSS の記述。


【5-6】広がりのみを指定した場合、外枠が太くなったような表示になる。これを利用したデザインも可能だ。


【5-7】HTML＋CSS3 の記述。


【5-8】左上と右下に影が表示される。

06

単色の塗りつぶしが味気なければ、グラデーションも利用できる。

CSS3ではgradientという関数によりグラデーションをかけた背景色を指定することができるようになった。

グラデーションは方向を指定する部分と色を指定する部分に分かれる。色は開始色と終了色が、方向は上から下、左から右、左上から右下の３つから選ぶことができる。

Chrome, Safariでは方向を自由に指定できるが、他のブラウザの対応を考えるならば、この3つから選ぶのが無難だろう【6-1】【6-2】。

このように、単純にグラデーションを使う場合は開始色、終了色の2色を指定するが、途中色をはさむことも可能なので、工夫次第で多彩な表現が可能である【6-3】【6-4】。

なお、現在のChrome、Safari、Firefox の最新版のバージョンは、「-moz-」の接頭辞のないlineargradient()の書き方にも対応している。詳しい書き方については次項で解説されているので参考にしてほしい（-webkit-gradient()の書き方は、新旧のChromeとSafariで対応している）。


【6-1】上から順に、上から下、左から右、左上から右下へグラデーションするHTML＋CSS の記述。


【6-2】上から下、左から右、左上から右下へのグラデーションの表示例。


【6-3】青から白に変わる途中で黒を差し込む場合のHTML＋CSS。


【6-4】途中色に黒を差し込んだ場合の表示例。

07

CSS3ではないが、IEではfilterという機能を使って上から下、左から右へグラデーションをかけられることをお伝えしておく【7-1】【7-2】。

グラデーションを使う場合の注意点としては、IEと他のブラウザでは実装の差異が大きい点だろう。IE のグラデーションは途中に色をはさむことができない上、border-radiusなどと一緒に使うと思ったとおりの表示にはならない【7-3】。

IE8以前のバージョンではCSS3の大半が動かず、IE9でも一部が未対応という現状を考慮に入れると、IEでCSS3を使う場合は「4-4 IEへの対応（1）ライブラリを利用したIEへの対策」で紹介しているクロスブラウザに対応したJSライブラリの導入を検討してもよいだろう。


【7-1】filterを使用し、IEでグラデーションを表示するHTML＋CSSの記述。上から下へ、左から右へのグラデーション。


【7-2】IEでグラデーションを表示した例。


【7-3】IE9でborder-radiusを使用した場合、このような表示になってしまう。


[目次に戻る]

 

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。


※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。