トグルスイッチ

2022年1月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回のお題は「トグルスイッチ」です！

なぜトグルスイッチを作ろうと思ったかというと、12月25日に思いつきで雪を降らせる→雪が見えないのでダークモード実装→切り替えスイッチをオサレにしようという流れです（どうでもいい）

トグルスイッチとは

トグルスイッチとは、1つのスイッチでオンとオフを交互に切り替えることのできるスイッチのことです。

Webにおいては、スマホの設定画面などでよく見かけるコレ→ですね。

トグルボタン、スライドトグルとも呼ばれます。

ダッフルコートの前を留める木製のボタン（トグル）に形が似ているのが名前の由来だそうです。

つくってみよう

参考：ミギムキ｜[CSS] オン/オフスイッチをiOSのスライドトグル風にスタイルしたい

.toggle_switch {
  display: table;
  font-size: 60px;
}

.toggle_switch > input {
  display: none;
}

.toggle_switch > label {
  display: block;
  position: relative;
  width: 1.8em;
  height: 1em;
  border-radius: 1em;
  background-color: #2b2a2f;
  cursor: pointer;
}

.toggle_switch > input:checked + label {
  background-color: #2dcb45;
}

.toggle_switch > label::before {
  position: absolute;
  top: 0.1em;
  left: 0.1em;
  width: 0.8em;
  height: 0.8em;
  border-radius: 0.8em;
  background-color: #fff;
  transition: 0.3s;
  content: "";
}

.toggle_switch > input:checked + label::before {
  left: 0.9em;
}

<div class="toggle_switch">
  <input id="slide_toggle" type="checkbox" value="">
  <label for="slide_toggle"></label>
</div>

まとめ

ピタゴラトグルスイッチができました！

任〇堂とN〇Kに怒られないかドキドキしています！