【お勉強メモ】CSSだけでクリックイベントをつくる

【お勉強メモ】CSSだけでクリックイベントをつくる HTML/CSS

こんにちは、mickです。

LightboxをCSSで実装する方法を探したとき、CSSのおもしろい使い方も一緒に置いてありました。

なるほど、すごっ!

と思ったので、お勉強メモとして記事にしました。

⇒ ソース:UNICO LABO「クリックイベントをCSSだけで」

CSSの擬似的クリックイベント

label要素がもつfor属性を使うと離れたinput要素を操作できます。
これを利用して、クリックイベントを擬似的につくりだせます。
CSSおもしろい。

CSSクリックイベントのデモ

吾輩は猫である。名前はまだない。

HTMLコーディング

<div id="sample">
  <label for="toggle">ココをクリックすると下の文字と背景が反転します</label>
  <input type="checkbox" id="toggle">
  <div>
    <p>吾輩は猫である。名前はまだない。</p>
  </div>
</div>

CSSコーディング

#sample label{
 cursor: pointer; /* ユーザーがマウスクリックできること知れるようにする */
}
#sample input{
 display: none;   /* Input要素によるボタンを非表示にする */
}
/* input要素のすぐ下にあるdiv要素を操作する */
#sample input+div{
 color: white;
 background: black;
}
/* チェックされた状態のinput要素のすぐ下にあるdiv要素を操作する */
#sample input:checked+div{
 color: black;
 background: white;
}

ポイントは、input:checked
これで、input のときとの違いができるので、2つの状態を生み出せます。

  • クリックしてない状態
  • クリックしてある状態

あとは、この2つのためのコーディングを書けばOK。
CSSのアニメーションといえば、transitionやanimation。
この方法でクリックイベントを使えばわざわざjQueryを使わなくてもよさそう。

まとめ。

自分のお勉強メモとしてCSSだけでクリックイベントをつくる方法を紹介しました。
CSSだけで実装すると、Webサイトが軽量化できると思ってるので個人的には結構好き。

自分がホームページを作り始めたころは、CSSがまだなかったんですよね。
ここまでできるようになったんだな、と改めて勉強してて驚きですよ。
今後は、モバイルサイト対応も活発化するはずなので、目が離せません。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/01/22

タイトルとURLをコピーしました