« 最近のつぶやかれ状況 | トップページ | 「劇場版 SPEC ~天~」見てきた感想 「翔」と比べると…… »

2012年4月10日 (火曜日)

CSSでボタンを作る際にハマった話

 ボタンを作るのに画像を使うのは面倒。CSSでなんとかしようとする。せめてマウスカーソルを載せたら色が変わるとかするといいかなあ。とか思いつつ。
 という感じで作ったのが「なんでもスライドアニメーション効果、jQueryでカルーセル「carouFredSel」がすごいよ」の、コントロール用ボタンだった。

 ボタンでトリガーされる動作は、jQueryプラグイン側で受け持ってくれるので、こっちは見た目だけを気にすればいい。

 a:hoverとかで背景色変えればいいか、とか思ったらそう簡単にはいかないのだった。

 hoverが効くのはaタグのみ。でもって、aにはhref属性が必要。というか、Chromeではhref属性がなくても背景色変えられたのだけど、IE9 ではhref属性が必須だった。

 また、a:activeも設定してみたんだけど、これまた失敗。クリックしたタイミングでボタンのアンカーテキスト(例では「◀」と「▶」)の色を変えようということなんだけど、たしかにクリックすると色は変わる。でも、IEではクリックし終わっても色が戻らないのだ。こりゃだめだ。ということで、これはやめることにした。

 とりあえず、ボタンっぽい感じに見えるからいいか。と思ってiPadでなにげに見ると、タップしたあと、ボタンの背景色が元に戻らない。hoverとかいう概念がないからやっぱり動作は変わってくるわけだよなあ。ということで、また失敗。

 これ以上はまたJavaScript書かなくちゃ、ということになるので、ここでやめとく。

 もっと簡単にできると思ったんだけどなあ。

 あとで時間があったら続く、ということで。

 今の時点ではこんな感じだ(上記リンクにあるものと同じ)。


|

« 最近のつぶやかれ状況 | トップページ | 「劇場版 SPEC ~天~」見てきた感想 「翔」と比べると…… »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/54442025

この記事へのトラックバック一覧です: CSSでボタンを作る際にハマった話:

« 最近のつぶやかれ状況 | トップページ | 「劇場版 SPEC ~天~」見てきた感想 「翔」と比べると…… »