検証する説
今回お持ちした説は、こちらです。
※ devroomさんを使わせていただきました。
どのような仕組みか
-
<input type="checkbox">のid属性と、<label>のfor属性で関連づけさせることができる。-
<label>をクリックすると、チェックの切り換えが可能になる。
-
- チェックボックスがチェックされている時、チェックボックスの状態が
checkedになるため、疑似クラスセレクター:checkedが使える。 - 要素の後ろにある同じ階層のセレクタの指定(
~)を駆使すれば、その状態を他要素に伝えることができ、表示の変更が可能。
これらをフルで使うことによって、on/off切り換え機能を伴うUIはすべてCSSのみで実装が可能であると考えました。
※ 仕組みがわかりやすいように、あえて直タグでスタイルを当てております。良い子は真似しないでください。
※ デザインは仕組みが伝わるレベルです。
1. アコーディオン
アコーディオンがHTML・CSSのみで作れる！という話をよく聞くので、これは確実にいけそうですね！
※ details/summaryを使えばいいやん！と思った方もいるかもですが、あくまで今回は検証のため、checkboxとlabelで実装します。
2. ハンバーガーメニュー
ハンバーガーメニューも、理屈はアコーディオンと同じなので、作れそう！
htmlの構造はビミョーですが、ハンバーガーメニューとしては機能するものができました！
3. モーダル
用件を満たせるかは怪しいけど、無理やり頑張れば行けそう...
labelタグを使いまくることで、モーダルを開くボタンをクリックすると開き、×ボタンもしくはoverlayをクリックすると閉じるモーダルが完成しました。
検証結果
※ こちらもdevroomさんを使わせていただきました。
実装はできますが、コードの可読性の低下や、意味合いを意識したマークアップができないなどの懸念がございます。
止むを得ずjavascriptが使えない場合のみ、参考にしていただけたらなと思います。