ボタンコード生成用
トグルスイッチ
オンとオフを切り替える、スライド式のスイッチ。
用途・説明
設定のオン・オフを切り替えるスライド式のスイッチを1つ作ります。通知の受け取り、ダークモード、公開・非公開など、押した瞬間に切り替わる設定に使います。ラベルとスイッチを1行に並べる指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ラベル]- スイッチの左に置く言葉。例：通知を受け取る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「トグルスイッチ」を実装してください。 ## 表示内容 - ラベル：[ラベル] - 最初はオンの状態で表示する ## デザイン - スイッチ：幅 48px・高さ 28px、角丸 9999px - オフ：背景 #CBD5E1。オン：背景 #1463F0 - つまみ：直径 22px の白い円（#FFFFFF）、うすい影。オフで左、オンで右に 200ms で移動 - ラベル：15px、font-weight 700、色 #1B2A44。ラベルは左、スイッチは右端に置く ## 状態 - hover：つまみのまわりに淡い輪を表示 - focus-visible：#1463F0 の 2px のアウトラインを外側に 2px 離して表示 - disabled：全体を不透明度50%に、カーソルは not-allowed ## アクセシビリティ - <button type="button" role="switch"> で実装し、aria-checked でオン・オフを伝える - ラベルの文字を押しても切り替わるようにし、スイッチとラベルを関連付ける - オンかオフかを色だけに頼らず、つまみの位置でも区別できること - スペースキーと Enter キーで切り替えられること - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 色・スイッチの大きさをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。