エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
CSSのみで、クリックした時に要素のレイアウト(表示・非表示等)を切り替える方法
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSSのみで、クリックした時に要素のレイアウト(表示・非表示等)を切り替える方法
クリックである要素の表示・非表示を制御することってあると思いますが、そういう場合はだいたいjQuery... クリックである要素の表示・非表示を制御することってあると思いますが、そういう場合はだいたいjQueryを使うことが多いと思います。自分もそういう場合はjQueryを使いますが、工夫次第でCSSのみで実装できるのでその方法を紹介(ただし、IE8以下には対応していないようです)。 主に使うCSSのテクニックは、:checked擬似クラスと隣接セレクタの+(もしくは、関節セレクタの~) :checked擬似クラスはチェックボックスやラジオボタンがチェックしている要素を表す擬似クラスで、例えば、以下のようにするとチェックボックスのオンオフでボタンの表示・非表示が切り替わります。 #entryBtn{ display:none; } #check1:checked ~ #entryBtn{ display:inline-block; } HTML <input type="checkbox" id=