← 一覧へ

やってみようスイッチを押してみてください

ボタン・操作部品メジャー（よく見る）

トグルスイッチ

Toggle Switch

押すと丸が横にスッと動いて、オン・オフが切り替わる。

別名スイッチトグルオンオフスイッチSwitch

どこで使われている？

よく見かける場所
iPhoneの設定、通知設定、各種アプリの設定画面
使うとよい場面
押してすぐ反映される、オン・オフの設定
避けたい場面
「保存」ボタンを押して確定するフォーム（チェックボックスにする）

補足押してすぐ反映されるものに使います。「保存」ボタンで確定する設定なら、チェックボックスが向いています。

似ているものとの違い

選んでもらう部品の違い（チェックボックス・ラジオボタン・トグルスイッチ・セグメントコントロール）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「トグルスイッチ（Toggle Switch）」を実装してください。

動き：横長の丸いレールの上に丸いつまみを置き、タップするとつまみが反対側へスライドしてオン・オフが切り替わる。オンのときはレールを色付きにする。押した瞬間に設定が反映される。

使う部品：<input type="checkbox" role="switch">（見た目は CSS で作る）
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら<input type="checkbox" role="switch">（見た目は CSS で作る）
iPhoneアプリならToggle
AndroidアプリならSwitch
FlutterならSwitch（iOS風なら CupertinoSwitch）
React NativeならSwitch

似ているもの・一緒に使うもの