HTML・CSS

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だけでクリックイベントを実装する方法でした。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-HTML・CSS
-

© 2020 ウェブつく Powered by AFFINGER5