和田憲幸のブログ

札幌市白石区在住、個人事業のWebエンジニア 和田憲幸(45歳)のブログです。

ボタンを色分け

ボタンに色を付けたり、シンボルを付けたり。そんな楽しい作業。

2011-12-26 18:06:10
入力時間 / 07:34

三色のボタン

ボタンに色とシンボルをつけてみた。こういう作業はやっぱり楽しいなぁ。

最初は単色だったのですが、直感的じゃないかなと思いまして「削除などの取り返しが付かないボタンは赤」「取り返しが付くけど注意が必要なボタンは緑」「その他は青」にしてみました。まぁなんとなくの色分けですけどね。

ボタンはbuttonやinputを使わずにボタン用のjsを起こしてみました。先日公開したIR.jsと原理はまったく同じなんですけどuiIRというのを作った。上記のような画像のbackground-positionを利用しいてマウスオーバー、マウスダウンを検知して動作するやつね。基本的に画像を用意してclass指定するのみなので、GUIを構成するときにすごく楽ちんなのだ。CSSに依存しないからね。

せっかくなのでaudioタグに対応してるブラウザの場合はフォーカスすると音がでるようにしたり。
これはちょっとウザいかなと反省している。

ボタンの形状はこれで完成じゃないと思うけど、後から一括で画像変更できるというのも、合理的なやり方だなと自負しております。面倒は本当に発明の母ですね。

使う人の事をアレコレ考えてUIをつくるってやっぱり楽しいもんですね。

P.1028