CSS note

CSSだけで、hoverした時やクリックしたときに、サブブロックやリストを表示するための基本について、わかりやすく解説します

CSSだけで行う、グーグルマップの表示コントロール

チェックボックスをCSSイベントのトリガーとして、表示コントロールをする場合 以下のように兄弟要素になっている必要があります　

<input type="checkbox"...>
<div id="target-box">
...
</div>

一般的なチェックボックスのスタイルは、以下のような構造でスタイルを当てることが多く

<div>
 <input type="checkbox"...>
</div>

トリガーとして使う場合は、使い勝手が悪くなります

以下のスタイル ...

youtubeのシアターモードっぽいスタイルの実装です。

個別投稿ページでご覧ください。