マウス操作だけでCSS3対応ボタンを自在に作成! その名も"Button Maker"

意外と面倒なボタン作成も"Button Maker"を使えば解決!?

WebアプリケーションやWebサイトを作成するにあたって、なにかと頻出するボタン。特別な意味をもたせるボタンには、ちょこっとアクセントをつけたいところ。実際に作成する場合

スタイルシートを編集 → Webブラウザで確認を繰り返す
Firebug等のデバッグツールを使い、オンザフライでスタイルシートを調整
CSS3に対応したWebブラウザ/デバッグツールでデザイン、画像ボタンとして保存/利用 (参考: CSSグラデーションを使ってクールなボタンをつくる方法)

といった方法があると思う。これらツールを使用しても、数字の微調整を繰り返すのはちょっと手間がかかる作業だ。ここでは、よりサックリとボタンを作る方法のひとつとしてButton Makerを紹介したい。

Button MakerはCSS-TRICKSが公開しているボタン作成Webアプリケーション(5月30日(米国時間)に投稿された紹介記事)。Webブラウザ上でスライダやカラーピッカーを使って、CSS3に対応したボタンを直感的に作成できる。

Mac版SafariでButton Makerにアクセス。スライダやカラーピッカーを使って、直感的にボタンを作成できる

Button MakerはjQuery、jQuery UI、colorpickerをベースに作成されているようだ。ソースコードも公開されているので、興味がある方はこちらもチェックしてみてほしい。

ボタン作成時に調整できる項目は次のとおり。

スライダで調節する機能/プロパティ

ボタンサイズ (padding)
フォントサイズ (font-size)
角丸サイズ (-webkit-border-radius, -moz-border-radius, border-radius)

カラーピッカーで調節する機能/プロパティ

ボタン上部/下部グラデーション色 (background, -webkit-gradient, -moz-linear-gradient)
上部ボーダー色 (border-top)
オンマウス時の背景/文字色 (:hover background, color)
文字色 (color)
クリック時の背景色 (:active background)

プルダウンで選択する機能/プロパティ

フォント (font-family) - 「Helvetica (Helvetica, Arial, Sans-Serif)」「Georgia (Georgia, Serif)」「Lucida Grande (Lucida Grande', Helvetica, Arial, Sans-Serif)」より選択

値の調節はおこなえないが、box-shadowやtext-shadowプロパティなども出力される。角丸やグラデーションといったCSS3の一部機能は、FirefoxやSafari、Chromeでもレンダリングされるよう、それぞれに対応したプロパティ/表記で出力してくれる。

画面右部のスライダやカラーピッカー、プルダウンを操作すると、画面左部のボタン表示がリアルタイムに変わっていく。実物をみながらデザインを調整できるというわけだ。満足いくボタンに仕上がったら、CSSをコピペして完了。

スライダを操作すると、ボタンやフォント、角丸のサイズが変わっていく

カラーピッカーで背景色やグラデーションも簡単に調節可能

ボタンをクリックするとCSSが表示される。CSSを表示しながら各種調節が可能になっているところも嬉しい

実際に出力されるCSSのイメージは次のとおり。

.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

Button Makerを使えば実物のボタンを見ながらマウスで微調整 → CSSコピペ、という流れでクールなボタンを作成できる。こまかい数値やカラーコードを何回も入力する必要もない。手っとり早くボタンを作りたいときに最適なWebサービスではないだろうか。

jQuery ThemeRollerであらかじめWebサイト全体のイメージを作成しておき、ワンポイントで使いたいボタンのCSSはButton Makerで作成 -- このように既存のWebサービスと併用すれば、さらに効率よくWebデザインをおこなえそうだ。自分のセンスを活かし、いろいろ試してみよう。