【レビュー】

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

 

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

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

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

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

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

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

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

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

  • ボタンサイズ (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デザインをおこなえそうだ。自分のセンスを活かし、いろいろ試してみよう。



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

美味しさは、飲んでみないとわからない - 全自動エスプレッソマシンを試せる「デロンギ 表参道」オープン
[07:00 9/30] スマホとデジタル家電
ねこのはなしをしようか 第26回 猫用おやつ
[07:00 9/30] 趣味
『モーツァルト音楽王』アマチュア枠優勝の女子高生に注目「スゲーうまい!」
[07:00 9/30] エンタメ
市川由衣、第1子出産に喜び「愛おしくてたまらない」「お母ちゃん頑張る!」
[07:00 9/30] エンタメ
小児科医が回答! 子どもの病気、危険のサイン 第5回 熱性けいれんの対処法は?
[07:00 9/30] ライフスタイル

求人情報