CSSトグルスイッチジェネレータ
純粋なCSSトグルスイッチを生成します。:checkedでスタイルされた本物のチェックボックスで、JavaScriptは不要です。サイズ、色、境界線の半径とアニメーション速度を設定し、スコープ付きクラス名を選択して、アクセス可能なHTML + CSSをコピーします。
入力
スタイル
高さの半分に制限されます。ピルの場合は高く設定し、正方形のスイッチの場合は0に設定します。
色
アウトラインスタイルでは無視されます。ノブがオン/オフ色自体を採用します。
動作とマークアップ
モーション削減を希望する訪問者に対して自動的に無効化されます。
生成されたルールはこのクラスにスコープされているため、独自のスタイルと競合しません。
ラベルなしのスイッチの場合は空白のままにしてください。
出力
トグルスイッチがここに表示されます。
実際に生成されたコンポーネント。Shadow DOMに分離されています。クリックするとアニメーションが表示されます。
トグルスイッチがここに表示されます。
上の2つの状態のインラインスタイルコピー。モックアップに便利です。対話的ではありません。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-switch-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"style": "track",
"width": "56",
"height": "32",
"borderRadius": "40",
"offColor": "#cbd5e1",
"onColor": "#22c55e",
"knobColor": "#ffffff",
"transition": "250",
"knobShadow": "true",
"className": "io-switch",
"labelText": "Enable notifications"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-switch-generator` tool (CSS Toggle Switch Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-switch-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSトグルスイッチジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このツールが行うこと
CSSトグルスイッチジェネレータは、本物の<input type="checkbox">とCSSだけからiOS風のトグルを作成します。サイズ、色、コーナー半径とアニメーション速度を設定すると、HTML、スタイルシート、およびオフとオン両方の状態のライブプレビューが得られます。
出力にJavaScriptはありません。スイッチは:checked兄弟セレクタのために切り替わります。これはキーボードで機能し、フォームで送信され、それをスタイル化できないもの上では通常のチェックボックスに低下することを意味します。
使い方
- スイッチスタイルを選択します。各スタイルが何を変更するかについては、以下を参照してください。
- 幅、高さ、境界線の半径を設定します。ピルの場合は半径を高く保ち、正方形のスイッチの場合は0に下げます。
- オフ、オン、ノブの色を選択します。
- アニメーションの継続時間を設定し、ノブの影を切り替え、クラス名を指定します。
- HTMLをマークアップにコピーし、CSSをスタイルシートにコピーします。
3つのスタイル
- トラック — ノブはトラック内にあり、高さの8分の1だけ内側に設定されています。これはクラシックなiOSスイッチです。
- スリム — トラックは細いバーで、ノブはそれより高く、上下に突き出ています。これはマテリアルデザインの形です。
- アウトライン — トラックは透明で、色付き枠線があり、ノブはオン/オフ色自体を採用します。ミニマルなUIまたはダークモードに適しています。
その他すべて — サイズ設定、色、半径、タイミング — は3つすべてに適用されるため、どれでもデフォルトから大きく離すことができます。
生成されたスイッチはアクセス可能ですか？
はい、これは生成されたスイッチが通常失敗するところです。出力は、本物のフォーカス可能なチェックボックスを保持します（視覚的に非表示で、タブオーダーから削除されるdisplay: noneは決してありません）、role="switch"を追加し、キーボードユーザーが現在地を確認できるように:focus-visibleアウトラインを描き、:disabled状態をスタイル化し、モーション削減を求める訪問者のためにアニメーションをprefers-reduced-motion: reduceブロックでラップして、遷移をオフにします。
CSSは既存のスタイルと競合しますか？
すべてのセレクタは、BEM風の__input / __track / __label命名を使用して、選択したクラス名の下に限定されます。何も単純な要素を対象としないため、既存のスタイルシートに貼り付けても他のものには影響しません。io-switchがすでに使用されている場合は、別の名前を入力するとブロック全体の名前が変更されます。
プレビューが静的なのはなぜですか？
プレビューは、一目で両方の状態を比較できるように、インラインスタイルで両方の状態を並べてレンダリングします。本物の:checkedルールと::before疑似要素はインラインstyle属性に存在することはできません。対話型バージョンは、コピーするHTML + CSSです。
スイッチ以外が必要な場合はどうすればよいですか？
単純なスタイル付きチェックボックスまたはラジオの場合、HTMLチェックボックスジェネレータはマークアップを生成します。形を微調整するには、CSSボーダーラディウスジェネレータを使用し、ノブのドロップシャドウについてはCSSボックスシャドウジェネレータがはるかに多くの制御を提供します。オン/オフの色を一緒によく読むように選択することは、カラーミキサーで簡単です。