和田憲幸のブログ

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

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

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

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

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

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