Blog

デバイスで見かけるON,OFFのボタンをhtmlとcssで実装してみる

2017.10.10Cat:css3 プログラマー

前々からやりたいと思っていましたがなかなかその機会もなかったのですが、管理画面を作ることも増えてきたので一足先に作ってみました。

あのスイッチみたいなUIのパーツは普通のwebサイトではお問合せでもなかなか使うことはないですよね…

普通のサイトで簡単に使えればいいなと思い、HTMLとcssのみで実装してみました。
iOS(風)、Windows(風)、Android(風)の3つを作りました。

DEMOは以下になります。

DEMO

ちなみにON/OFF切り替え時の動きは適当になります…
windows,androidは持っていません…

簡単ではありますが、
説明になります。

コード

基本的にはhtmlは同じになります。
(コード上はclass名がそれぞれ違いますが、htmlの構成は同じです)

html

簡単に説明すると、
checkboxは隠していますが、labelで囲われているのでチェックができるようになっています。

そしてcheckboxにチェックがされているかいないかで、
switch__content,switch__circleのcssを変更しています。
switch__contentはスイッチの背景で、疑似要素を使いながらon,offの切り替えをしています。
switch__circleはその名の通り、丸い部分で、位置や色の設定をしています。
(circleっていうのは本来相応しくないclass名だとは思いますが…)

css
まとめずにひとつずつ別々に書いています。

難しくはないのですが、iosは動きも含め、
どのようにやるのが効率良く・汎用的にできるかやるのがちょっと手がかかりました…

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ