アプリなどでは、クリック時にボタンの色やカードビューの色が変わって、クリック中、もしくはクリックしたことが分かるようになりますが、今回はそれをCSSで実現する方法についてです。
Cordovaでウェブビューのアプリを作っているのですが、「クリックした感」がわからないので手動で追加してみました。
…これで二重クリックが減るかな？
今回使うのは「疑似クラス」というものです。
これを記述することで、マウスオーバー時、クリック中などのスタイルを指定することができます。
サンプルは下記のとおり。
<a href="">クリック中は色が変わります</a>
a:active {
// クリック中に適用されるスタイル
a:active {color:#FFF;background:#F00;}
}
上のサンプルを実行すると、リンクをクリックしている間、文字の色は白色に、背景色は赤になります。
なお良く使われるのは、このくらいかな。
- :link 未訪問のリンクにスタイルを適用
- :visited 訪問済みのリンクにスタイルを適用
- :hover マウスオーバーの要素にスタイルを適用
- :active クリック中の要素にスタイルを適用
- :before 指定した要素の直前に内容を挿入する
- :after 指定した要素の直後に内容を挿入する
なお、下二つのサンプルはこんな感じ
<h1>先頭に丸が付きます</h1> <a href="">カギカッコで囲まれたリンク</a>
h1:before {
content:"○";
}
a:before {
content:"「";
}
a:after {
content:"」";
}
contentプロパティは、文字だけでなく画像も指定できるので、リスト表示の先頭の丸をアイコン画像に変えたり、ブログとかでよく見る、リンクの後ろに新着記事を表す「New!」のアイコンを表示したりできそうですね。
それ以外は正直思いつきませんが…汎用性は高そうです。
ということで、今回は疑似クラスについてでした。
にしても、少し色を付けたりするだけで、「クリックした感」がぐっと上がるので、色などデザインの影響力の大きさを改めて実感しましたね。
もっと効果的に使えるようになりたいです。
