🍉

クリックで表示を切り替えるクリックイベント風CSS

TETRER

2023/10/30に公開

CSS

HTML

tech

はじめに

今回はクリックしたら文字や画像を切り替える処理を作ります、HTMLとCSSのみで！
通常クリックイベントはJavaScriptを使いますが、今回はJavaScriptを使わない縛りです🎃

クリックで文字の表示を切り替える

DEMO

HTML

<input type="checkbox" id="toggle">
<label class="label" for="toggle"></label>

チェックボックスと、チェックボックスに関連付けたラベルを用意します。
チェックのON/OFFでイベントを制御するためです。

CSS

#toggle {
  display: none;
}

#toggle + .label::after {
  content: "クリック前（checkbox OFF）";
}

#toggle:checked + .label::after {
  content: "クリック後（checkbox ON）";
}

チェックボックスの表示は不要なのでdisplay:noneとし、
疑似クラスcheckedを使って、クリック前とクリック後のCSSを切り替えます。

チェックボックスと関連付けたラベルは隣接セレクタ+をclass名で指定し、
疑似クラスafterとプロパティcontentで文字を挿入しています。

ラベルをクリックするとチェックボックスのON/OFFが切り替わるので、
これだけで完成です♪

クリックで画像の表示を切り替える

DEMO

HTML

文字の表示を切り替える場合と同じで、
チェックボックスと、チェックボックスに関連付けたラベルを用意します。

CSS

#toggle {
  display: none;
}

#toggle + .label::after {
  content: url("｛画像ファイルのパス｝");
}

#toggle:checked + .label::after {
  content: url("｛画像ファイルのパス｝");
}

文字の表示を切り替える場合とほぼ同じですが、挿入する画像ファイルをurlで指定します。
urlの指定は、相対パスでも絶対パスでもOKです。

おわりに

JavaScriptの方がシンプルに実現できることを、わざわざCSSを使う必要はないですが、
CSSだけでもいろいろ動きのある表現ができますね。
もっと調べたら表現の幅を広がって面白そうです🧙

参考サイト

コラボスタイル DevelopersPublication

私達は『ワークスタイルの未来を切り拓く』という理念のもとワークフローの本質を追求し、新しいワークスタイルを提案するとともに、コラボスタイルが率先して時代に適したワークスタイルを常にバージョンアップし発信していきます。

はじめに

クリックで文字の表示を切り替える

DEMO

HTML

CSS

クリックで画像の表示を切り替える

DEMO

HTML

CSS

おわりに

参考サイト

Discussion