CSS ホバー効果ビルダー
控えめなホバースタイルを選び、色と動きを調整して生成した HTML と CSS をコピーします。
ライブプレビュー
値を編集するとプレビューが更新されます。
:focus-visible と prefers-reduced-motion を含みます。ホバー効果は装飾用にし、文字の明瞭さを保ってください。
使い方
使い方
- 短い要素ラベルを入力し、浮上、下線、発光、色付けから選びます。
- ライブプレビューを見ながら、ホバー色、移動距離、遷移時間を調整します。
- HTML と CSS をコピーし、文字を読みやすく保ちながら効果を装飾として使います。
範囲を限定したローカル CSS 生成
4 種類の固定効果から 1 つを使い、短いボタン例を生成します。文字数は 200 文字までで、生成 HTML に入れる前に特殊文字をエスケープします。ネットワーク、ストレージ、外部依存は使いません。
キーボードと動きへの配慮
生成ルールには :focus-visible があり、キーボード利用者に明確なアウトラインを表示します。prefers-reduced-motion では遷移を削除します。
よくある質問
あわせて知りたいこと
どの効果を選べますか？
浮上、下線、発光、色付けを選べます。距離と時間には範囲があります。
入力文字は安全ですか？
200 文字に制限し、HTML 特殊文字をエスケープして出力します。
動きを減らす設定に対応していますか？
はい。prefers-reduced-motion: reduce で遷移を無効にし、操作性と可読性を保ちます。