ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSS Toggle Switches with BootstrapはCSSのみでトグルスイッチを実現するBootstrap用ライブラリです。

JavaScriptを使えば簡単にできることをCSSだけでどう実現するか、そんな取り組みはとても面白いです。今回はCSSだけで実装されたトグルスイッチUIのCSS Toggle Switches with Bootstrapを紹介します。


最初の表示。


クリックでオフに切り替わりました。


スイッチの幅も自由に変更できます。


さらに二つに限らず4つのトグルもできます。この場合はラジオボタンを使っています。

仕組みとしてはシンプルで、スタイルシートでcheckedや使って見た目を変更しているのですが、4つ場合などはアニメーションまでついて選択状態が反映されます。スマートフォン的なデザインで使いどころによってはユーザビリティが高くなりそうです。

CSS Toggle Switches with Bootstrapはスタイルシート製、Public Domainのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

セキュリティ上の理由などからJavaScriptをオフにする人はいますが、スタイルシートを適用しないようにする人は殆どいないと思われます。そのためスタイルシートだけでやりたい処理ができるならば、JavaScriptを使わない方が安全と言えます。

なんでもスタイルシートが良いというわけではありませんが、その逆に何でもJavaScriptが良いという訳ではありません。JavaScriptでの処理が増えるとそれだけ負荷が高くなったり、実行速度の問題が出てきます。技術の使い分けは今後ますます大事になるでしょう。

CSS Toggle Switches with Bootstrap

ghinda/css-toggle-switch · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2