Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
50
Help us understand the problem. What is going on with this article?
@deren2525

CSSで作るToggle Switchを学んだのでさっそく作ってみた

More than 1 year has passed since last update.

備忘録です。

Toggle Switch(Toggle Button とも呼ばれているみたいです。)がCSSで作れると知って、へぇ〜っとなったのでいつものように勉強がてら作りました。

周りの人たちに、結構知らないこと多いよねとよく言われます。
....勉強します(´・_・`)

この話の流れとしては
Toggle Switch ってCSSで作るとこうなんだって!という話と
作り方を知ったので何か作ってみたよ! という話を最後にちろっと書いています。

Toggle Switch

こんなの。よく見かけますね。これです。

See the Pen jQxYVx by Deren (@deren2525) on CodePen.


CSS で Toggle Switch

先ほど見せた Toggle Switch の正体はチェックボックスです。
チェックボックスとそれに紐づくラベル + @ のスタイルをちょちょいといじってあげるとさっきみたいな Toggle Switch ができます。
仕組みをはじめて知ったとき少しテンションが上がりました。おもしろい。

See the Pen Lo estoy usando en mi blog. Parte 2 by Deren (@deren2525) on CodePen.

詳細

順に説明します。
image.png

① ボタンの背景は Ckeckboxの<label>
ボタンの背景は Ckeckboxの<label>です。なので<label>にスタイルを当てています。チェックボックスにチェックが入ったら背景を緑にするといった仕組みです。

style.scss
label {
  width: 75px;
  height: 42px;
  background: #ccc;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
  box-sizing: border-box;
}

input:checked {
  +label{
    background-color: #4BD865;
  }
}

②Toggle Switch の左右に動く 「 ○ 」
Toggle Switch の左右に動く 「 ○ 」 は今回 label の 疑似要素after を利用して作っています。
チェックボックスにチェックが入ったら右に 「 ○ 」 が移動するようスタイルを書いていきます。

style.scss
label {
  &:after { // ○ のスタイル
    content: '';
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.4s;
    cursor: pointer;
  }
}

input:checked {
  +label{
    &:after{
      left: 40px;
    }
  }
}

ちなみに擬似要素じゃなくて、spanタグを使っても、入れ子のルールとしては問題ないので、「 ○ 」 をspanタグで使用してもOKです。

main.html
<div class="toggle-switch">
  <input id="toggle" type='checkbox' />
  <label for="toggle"/>
    <span></span> <!-- spanでもいいよ -->
</div> 

<input>どこいった?
スタイルが当たっている Toggle Switch を見てもらったらわかると思うのですが、<input>が見えていないです。あの子は見えなくてよいのです。見えない所に隠してあげましょう。opacityでもz-indexでも見えなくなればなんでもいいです。
ただし、display: none;にしちゃうとcursor: pointer;とか効かなくなっちゃうので、それはやめたほうが良いです。
下のコードではopacityで隠しています。

【2019/12/30 追記】
cursor: pointer;<label> につければよくて <input>display: none; だけでよかったです。
display: none; してもラジオボタンって効くんですね!どこで勘違いしちゃったんだろう
@m0nch1 さんアドバイスありがとうございました!

style.scss
input {
    display: none;
}

ということで

Toggle Switch の作り方を知ったのでCSSで何か作ってみました。
CodePenの今週のチャレンジテーマが「トラ」だったのでモデルはトラです。
ボタンの切り替えでトラが起きたり寝たりします。
input:checked が大活躍しています。

See the Pen CodePen Challenge : CSS Tiger Toggle Buttons by Deren (@deren2525) on CodePen.


まとめ

Toggle Switch 楽しい

50
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
deren2525
CodePenによく出没している。 記事の内容は所属組織とは関係ありません🐶
fixer-inc
Microsoft Azureの24/365フルマネージドサービス「cloud.config」を中核とするクラウドソリューションを提供。最先端のテクノロジーで、お客様の新たな挑戦を成就します。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
50
Help us understand the problem. What is going on with this article?