CSSだけでトグルスイッチを実現するUI「CSS Toggle Switches with Bootstrap」
CSS Toggle Switches with BootstrapはCSSのみでトグルスイッチを実現するBootstrap用ライブラリです。
JavaScriptを使えば簡単にできることをCSSだけでどう実現するか、そんな取り組みはとても面白いです。今回はCSSだけで実装されたトグルスイッチUIのCSS Toggle Switches with Bootstrapを紹介します。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.16.41.1363861241.png)
最初の表示。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.16.45.1363861245.png)
クリックでオフに切り替わりました。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.16.51.1363861248.png)
スイッチの幅も自由に変更できます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.16.58.1363861252.png)
さらに二つに限らず4つのトグルもできます。この場合はラジオボタンを使っています。
仕組みとしてはシンプルで、スタイルシートでcheckedや使って見た目を変更しているのですが、4つ場合などはアニメーションまでついて選択状態が反映されます。スマートフォン的なデザインで使いどころによってはユーザビリティが高くなりそうです。
CSS Toggle Switches with Bootstrapはスタイルシート製、Public Domainのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
セキュリティ上の理由などからJavaScriptをオフにする人はいますが、スタイルシートを適用しないようにする人は殆どいないと思われます。そのためスタイルシートだけでやりたい処理ができるならば、JavaScriptを使わない方が安全と言えます。
なんでもスタイルシートが良いというわけではありませんが、その逆に何でもJavaScriptが良いという訳ではありません。JavaScriptでの処理が増えるとそれだけ負荷が高くなったり、実行速度の問題が出てきます。技術の使い分けは今後ますます大事になるでしょう。