CSSのみで、クリックした時に要素のレイアウト(表示・非表示等)を切り替える方法


クリックである要素の表示・非表示を制御することってあると思いますが、そういう場合はだいたいjQueryを使うことが多いと思います。自分もそういう場合はjQueryを使いますが、工夫次第でCSSのみで実装できるのでその方法を紹介(ただし、IE8以下には対応していないようです)。

主に使うCSSのテクニックは、:checked擬似クラスと隣接セレクタの+(もしくは、関節セレクタの~)
:checked擬似クラスはチェックボックスやラジオボタンがチェックしている要素を表す擬似クラスで、例えば、以下のようにするとチェックボックスのオンオフでボタンの表示・非表示が切り替わります。

CSS

HTML


以下、実行結果


ちなみに、チェックボックスやラジオボックスは非表示(display:none)になっていてもチェックできるようなので、やろうと思えばlabelタグをボタンのようにして、ボタンを押したような状態のレイアウトでチェックの可否を表すこともできる。

CSS

HTML

以下、実行結果

登録しているサイトをクリックしてください





コメントを残す

メールアドレスが公開されることはありません。