プログラミング

プログラミング

PR

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

25,675 views

読了時間 : 約2分49秒

Download the Source Files     View the Demo

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

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

 

 

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

 

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

 

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

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

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

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

の3種類です。

 

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

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

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

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

 

 

1.丸スタイル

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

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

 

 

2.丸スタイル(縁あり)

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

CSSは以下の通りです。

 

 

3.2択スタイル

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

 

 

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

 

 




おすすめ新着記事

おすすめタグ