Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8644

【検証】checkboxとlabelを使えば切り換え機能を伴うUIは全てjavascriptを使わずに実装できる説

$
0
0

検証する説

今回お持ちした説は、こちらです。
checkboxとlabelを使えば切り換え機能を伴うUIは全てjavascriptを使わずに実装できる説
devroomさんを使わせていただきました。

どのような仕組みか

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

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

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

1. アコーディオン

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

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

2. ハンバーガーメニュー

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

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

3. モーダル

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

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

検証結果

検証結果 コードが不格好なので、javascriptを用いて実装した方が良い
※ こちらもdevroomさんを使わせていただきました。

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


Viewing all articles
Browse latest Browse all 8644

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>