We Blog Weblog

トグルスイッチ

Web

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>

まとめ

トグルスイッチ

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

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP