Webデザイナー必見！CSSだけで作るトグルスイッチ３種【丸スタイル・２択スタイル】

Download the Source Files     View the Demo

ユーザに何か質問に答えてもらうとき、よく使われるのがチェックボックスですが、CSSのみでは実装できませんし、ブラウザエンジンごとに管理方法も変わってくるのが難点です。モバイルアプリのようなスムーズなインターフェイスが欲しくなりますよね。

ところが、［:checked］［:before］［:after］の3つの疑似クラスを上手く組み合わせれば、トグルタイプのスイッチがCSSのみで作れてしまいます。さっそくその方法を見ていきましょう。

 

 

３種のトグルスイッチに共通する部分の作成

 

HTMLは典型的なinput要素のチェックボックスと、それに対応するラベルになっています。それぞれのラベルとinput要素の組み合わせが［div］内にまとめられています。今回私は［switch］クラスを使いました。

 

本記事で紹介するトグルボタンは、

・丸いスタイルのトグルボタン（iOSのトグルスイッチと似たもの）

・丸いスタイルでふちのあるスイッチ

・Yes／Noのフリップスタイルのスイッチ

の3種類です。

 

それぞれのスタイルは、［input］要素のクラスで指定されます。ラベルは［input］＋［label］セレクタで指定するので、いちいちクラス名をつける必要はありません。それではまず、Ⅲ種類のトグルスイッチに共通するHTMLを見てみましょう。

CSSでは、チェックボックスそのものは視界に入らないよう、スタイリングはラベルで行います。ラベルそのものをクリックすることで、チェックボックスの印をつけたり外したりできるので、とても便利です。下の画像のCSSは、すべてのトグルスイッチに共通して使います。

どのトグルスイッチも多少の計算が必要になりますが、慣れればスケールの上げ下げが簡単にできるようになります。SassなどのCSSプロセッサをお使いの場合、変数を設定すればさらに楽に作業をすすめることも可能です。

この後の工程では、大体の物に［box-sizing:］［border-box］プロパティを使っていきます。ソースをダウンロードする場合はCSSがすべてプリフィックスされていますが、上の画像と下の画像ではされていないので、コピーされる場合は注意してください。

 

 

１．丸スタイル

まず、コンテナとして機能してくれる［label］で、幅・高さ・背景色を設定します。［:before］エレメントでスイッチの内側が薄いグレーから緑へ変化するようにします。［:after］エレメントでスイッチの丸い部分が最前面に来るようにして、左右にスワイプできるようにします。スイッチが周りから浮き上がるよう［box-shadow］も使います。Input要素が疑似クラス［:checked］を扱う時に、［:before］エレメントの背景色と［:after］エレメントの位置が変わるようにすれば、完成です。

CSSは下の画像のようになります。

 

 

２．丸スタイル（縁あり）

最近のウェブサイトと相性の良い、フラットでふちのあるデザインです。丸いスタイルのトグルスイッチと機能の仕方は似ていますが、見た目が少しだけ違います。

CSSは以下の通りです。

 

 

３．２択スタイル

今度はこれまでとは違って、フリップスタイルのトグルスイッチを作成していきます。デフォルトでは“No”と表示されたグレーのフリップが、チェックされた場合は“Yes”と表示された緑のフリップが出ます。データ属性を使って、ラベルがクリックされるとスイッチがY軸を中心に180度ひっくり返るようにします。このデータ属性はHTML内で［data-on］と［data-off］で指定され、それぞれ疑似要素の［:after］と［:before］を事前設定するようになっています。CSSは以下の通りです。

 

 

※本記事は、Creating Round, Flat and Flip-Style CSS Toggle Switchesを翻訳・再構成したものです。