CSSボタン・トグルスイッチ・三角形ジェネレーター
ボタン、トグルスイッチ、三角形、矢印といったUI部品のHTMLとCSSを、テーマ色や角丸、サイズ、ホバー時の動きを選ぶだけで生成します。プレビューにはホバーやチェックの切り替えが実際に反映されます。トグルスイッチはcheckboxとlabelだけで動き、JavaScriptは不要です。出力のクラス名はnk-で始まるので、既存のCSSと衝突しにくくなっています。影を細かく調整したいときは CSS box-shadowジェネレーター、角丸だけを作り込みたいときは CSS border-radiusジェネレーター も使えます。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
プレビュー
マウスを重ねるとホバーの動きを確認できます。
コントラスト比（簡易）
- 通常時:
- ホバー時:
使い方
- 「部品の種類」からボタン・トグルスイッチ・三角形・矢印のいずれかを選びます。
- 「テーマ色」を指定し、プリセットや「ホバー時の動き」、サイズなどを調整します。
- プレビューにマウスを重ねる、またはスイッチをクリックして動きを確認します。
- 「HTMLをコピー」「CSSをコピー」で、それぞれ自分のコードに貼り付けます。
注意事項
- コントラスト比は文字色・背景色から計算した簡易表示です。実際の画面では、周囲の背景色や文字の太さも合わせて確認してください。
- 三角形はborderを使う方式です。幅・高さを0にして線の太さで形を作るため、中に文字を入れたり、背景色を付けたりすることはできません。
- 三角形と矢印の浮き上がりには`translate`プロパティを使っています。古いブラウザでは浮き上がらず、色の変化のみになります。
- トグルスイッチの入力欄は画面外に隠していますが、キーボードのフォーカスと操作はそのまま使えます。状態を取得するときは`input`のchecked属性を参照してください。
- ラベルや色はHTML・CSSに書き出す前に検証・エスケープしています。#RRGGBB形式以外の色は、初期色に置き換わります。
用語解説
border方式の三角形
幅と高さが0の要素に太いborderを引き、隣り合う辺の斜めの接合部を利用して三角形を作る方法。不要な辺を透明にする。
:hover
マウスポインターが要素の上にあるときに適用される疑似クラス。タッチ操作では挙動が端末ごとに異なる。
:focus-visible
キーボード操作などでフォーカスされたときだけ枠を表示する疑似クラス。ボタンとトグルスイッチに設定している。
コントラスト比
2色の明るさの差を1〜21で表した値。WCAG 2.xでは、通常の文字は4.5以上、図形やUI部品は3以上が目安。
よくある質問
トグルスイッチはJavaScriptなしで動きますか？
動きます。`input type="checkbox"`の`:checked`状態を`+`（隣接セレクタ）で拾い、つまみの位置と背景色を切り替えています。`label`で全体を囲んでいるので、スイッチのどこをクリックしても切り替わります。
CSSだけで三角形を作るにはどうしますか？
幅と高さを0にした要素に`border`を引き、三角形にしたい辺以外を`transparent`にします。向きによってどの辺に色を付けるかが変わります。このツールで向きとサイズを選ぶと、border-widthとborder-colorの組み合わせを出力します。
生成したCSSが既存のスタイルと衝突しませんか？
クラス名はすべて`nk-`で始まる名前（`nk-btn`、`nk-toggle`など）にしています。それでも同じ名前を使っていないか確認し、必要なら置換してください。要素セレクタ（`button`など）への指定は含みません。
ボタンのコントラスト比はどう計算していますか？
WCAG 2.xの相対輝度の式で、文字色と背景色から1〜21の比率を出しています。文字色は背景色に対して白か濃い色のうち比率が高い方を自動で選びます。淡色スタイルは濃いめの同系色を文字にします。
スマートフォンでホバー効果は動きますか？
タッチ端末にはホバーがないため、タップした直後に状態が残ったり、まったく反応しなかったりと端末によって異なります。ホバーだけに重要な情報を頼らないようにしてください。
このページをシェア