トグルスイッチ
コピペですぐ使えるトグルスイッチのサンプルコードを動作・特徴別にまとめています。
無料ツール
トグルスイッチを自由に作成

ラベル・外枠・サイズ・色・角丸・切り替え速度などを設定して、HTML・CSSを自動生成できます。

トグルスイッチ作成ツールを使う
新しいタブで開きます

基本

基本のトグルスイッチを作る方法

表示非表示

ONになっている項目名を表示するトグルスイッチを作る方法
ONになっている項目数を表示するトグルスイッチを作る方法
ダークモードに切り替えるトグルスイッチを作る方法
入力フォームを表示・非表示にするトグルスイッチを作る方法
ON・OFF状態をリアルタイム表示するトグルスイッチを作る方法

デザイン

立体的なトグルスイッチを作る方法

レイアウト

2行レイアウトのトグルスイッチを作る方法
2列レイアウトのトグルスイッチを作る方法
縦並びで表示するトグルスイッチを作る方法
横並びで表示するトグルスイッチを作る方法
グループごとに表示するトグルスイッチを作る方法

初期状態

複数のトグルスイッチのうち1つだけ最初からONにする方法
最初からONになっているトグルスイッチを作る方法

自動

指定時間後に操作できなくなるトグルスイッチを作る方法

操作

モーダルウインドウを表示するトグルスイッチを作る方法
複数のトグルスイッチのON・OFF状態を取得する方法
一括でON・OFFできるトグルスイッチを作る方法
確認メッセージを表示するトグルスイッチを作る方法
ボタンを有効・無効に切り替えるトグルスイッチを作る方法
ON・OFF状態を取得するトグルスイッチを作る方法

状態維持

ページを移動してもON/OFFを記憶するトグルスイッチの作り方

コンテンツ

画像を切り替えるトグルスイッチを作る方法

入れ子

ドロップダウンメニューを表示するトグルスイッチを作る方法
ドロワーメニューを表示するトグルスイッチを作る方法

入力・検証

操作できないトグルスイッチを作る方法

認証

パスワード入力で開くトグルスイッチを作る方法
パスワード入力完了で開くトグルスイッチを作る方法

応用

FAQ・Q&A向けトグルスイッチの作り方