CSSで実装が面倒なトグルをさまざまなデザインで簡単に実装できるCSSの軽量ライブラリ -MoreToggles.css

シンプルなHTMLに、実装が面倒なトグルをclassを加えるだけで簡単に実装できるスタイルシートを紹介します。

iOSやAndroidのスタイルをはじめ、チェックやスクエアなど、さまざまなデザインのトグルを簡単に実装できます。トグルは拡大縮小にも対応しているので、非常に便利です。

サイトのキャプチャ

MoreToggles.css
MoreToggles.css -GitHub

MoreToggles.cssの特徴

MoreToggles.cssは、さまざまなデザインのトグルを簡単に実装できるCSSライブラリです。classを追加するだけで、簡単に利用できます。

MoreToggles.cssの特徴
  • JavaScriptはなし、ピュアCSS
  • classを付与するだけで、簡単な実装
  • 8つのスタイル(さらに増やす予定)
  • トグルの拡大縮小にも対応
  • MITライセンス

MoreToggles.cssのデモ

デモではMoreToggles.cssで実装されたさまざまなデザインのトグルを楽しめます。
iOSやAndroidをはじめ、チェック、スクエア、絵文字などもあります。

サイトのキャプチャ

デモページ

MoreToggles.cssの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

Step 2: HTML

トグルを実装するinputとlabel要素をdiv要素で内包し、.mt-*を与えます。「*」はスタイルを選択できます。

各スタイルには、カラーのバリエーションも用意されており、classで適用できます。

ラッパーのdivにfont-size:10px;を加えることで、トグルを拡大縮小できます。別の数字を試してみると、トグルがスムーズに拡大縮小します。

sponsors

top of page

©2020 coliss