スライドスイッチスマホの設定などでよく見かけるスライドしてスイッチをON/OFFするUIのサンプルです。デザインJavaScriptjQuerytoggleClass[jquery]keydown[jquery]addClass[jquery]hasClass[jquery]右にスライドするとON、左に戻すとOFFになるデザインをCSSだけで形と動きを実装しています。以下のスワイプではなく、スイッチ全体をタップするだけで、切り替わる簡単実装です。おまけでキーボードの←ボタン、→ボタンでも動くよう実装でしています。OFF切り替えをクラスの付け外しで実装しているので、連動して動く部分はhasClassメソッドで連動しています。#6C6;}よくスマホの設定画面で採用されるUIなので、ユーザーフレンドリーな表現と判断してもよさそうです。