検証する説

今回お持ちした説は、こちらです。

※ devroomさんを使わせていただきました。

どのような仕組みか

<input type="checkbox">のid属性と、<label>のfor属性で関連づけさせることができる。
- <label>をクリックすると、チェックの切り換えが可能になる。
チェックボックスがチェックされている時、チェックボックスの状態がcheckedになるため、疑似クラスセレクター:checkedが使える。
要素の後ろにある同じ階層のセレクタの指定(~)を駆使すれば、その状態を他要素に伝えることができ、表示の変更が可能。

これらをフルで使うことによって、on/off切り換え機能を伴うUIはすべてCSSのみで実装が可能であると考えました。

※ 仕組みがわかりやすいように、あえて直タグでスタイルを当てております。良い子は真似しないでください。
※ デザインは仕組みが伝わるレベルです。

アコーディオンがHTML・CSSのみで作れる！という話をよく聞くので、これは確実にいけそうですね！

※ details/summaryを使えばいいやん！と思った方もいるかもですが、あくまで今回は検証のため、checkboxとlabelで実装します。

ハンバーガーメニューも、理屈はアコーディオンと同じなので、作れそう！

htmlの構造はビミョーですが、ハンバーガーメニューとしては機能するものができました！

用件を満たせるかは怪しいけど、無理やり頑張れば行けそう...

labelタグを使いまくることで、モーダルを開くボタンをクリックすると開き、×ボタンもしくはoverlayをクリックすると閉じるモーダルが完成しました。

※ こちらも[devroom](https://devroom.azurewebsites.net/Generator/WednesdayResult)さんを使わせていただきました。

実装はできますが、コードの可読性の低下や、意味合いを意識したマークアップができないなどの懸念がございます。
止むを得ずjavascriptが使えない場合のみ、参考にしていただけたらなと思います。