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

備忘録です。

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

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

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

## Toggle Switch
こんなの。よく見かけますね。これです。
<p data-height="236" data-theme-id="0" data-slug-hash="jQxYVx" data-default-tab="result" data-user="deren2525" data-pen-title="jQxYVx" class="codepen">See the Pen <a href="https://codepen.io/deren2525/pen/jQxYVx/">jQxYVx</a> by Deren (<a href="https://codepen.io/deren2525">@deren2525</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## CSS で Toggle Switch

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

<p data-height="345" data-theme-id="0" data-slug-hash="wQjpLE" data-default-tab="result" data-user="deren2525" data-pen-title="Lo estoy usando en mi blog. Parte 2" class="codepen">See the Pen <a href="https://codepen.io/deren2525/pen/wQjpLE/">Lo estoy usando en mi blog. Parte 2</a> by Deren (<a href="https://codepen.io/deren2525">@deren2525</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 詳細
順に説明します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302304/39dec2e5-389d-58f4-cb09-873d1ccae06e.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` が大活躍しています。
<p data-height="435" data-theme-id="0" data-slug-hash="EOQVaG" data-default-tab="result" data-user="deren2525" data-pen-title="CodePen Challenge : CSS  Tiger Toggle Buttons" class="codepen">See the Pen <a href="https://codepen.io/deren2525/pen/EOQVaG/">CodePen Challenge : CSS  Tiger Toggle Buttons</a> by Deren (<a href="https://codepen.io/deren2525">@deren2525</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## まとめ
Toggle Switch 楽しい