CSSだけでクリックイベントを実装する【JavaScriptなし】

この記事ではJavaScriptを使わず、CSSだけでクリックイベントを実装する方法を紹介します。

CSSだけでクリックイベントを実装する

まずはデモをチェック

実際のソースコード

「画像を表示する」をクリックすると、画像が表示されるというデモでした。実際のソースコードは下記になります。

input + #img{
  display: none;
}
input:checked + #img {
  display:block;
}
#check{
  display:none;
}

<label for="check">画像を表示する</label>
<input type="checkbox" id="check">
<div id="img"><img src="https://web-tsuku.life/wp-content/uploads/2019/06/webtsuku.png"></div>

ここでは、「隣接」の「+」を使ってCSSを書いていますが、他の書き方もできます。

≫CSSの「＋（プラス）」とは何？使い方は？

ポイントはcheckedの疑似クラスですね。この有無によって、displayのnoneとblockを切り替えています。

以上が、JavaScriptを使わず、CSSだけでクリックイベントを実装する方法でした。