浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】疑似クラスを使って要素がクリック中であることを表現する方法

アプリなどでは、クリック時にボタンの色やカードビューの色が変わって、クリック中、もしくはクリックしたことが分かるようになりますが、今回はそれを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!」のアイコンを表示したりできそうですね。
それ以外は正直思いつきませんが…汎用性は高そうです。

 

ということで、今回は疑似クラスについてでした。
にしても、少し色を付けたりするだけで、「クリックした感」がぐっと上がるので、色などデザインの影響力の大きさを改めて実感しましたね。
もっと効果的に使えるようになりたいです。

  • この記事いいね! (9)