クリックで回転トグルアイコン
このパーツは、丸いボタンの中の ＋ 記号がクリックで45度回転し、見た目上は × に切り替わるトグルアイコンです。JavaScript で is-on クラスを付け外しするだけのシンプルな仕組みで、回転や配色の変化は span の transform:rotate(45deg) と transition がすべて担…
解説
このパーツは、丸いボタンの中の ＋ 記号がクリックで45度回転し、見た目上は × に切り替わるトグルアイコンです。JavaScript で is-on クラスを付け外しするだけのシンプルな仕組みで、回転や配色の変化は span の transform:rotate(45deg) と transition がすべて担います。バウンドのある cubic-bezier を使っているため、切り替わりに少し弾むような気持ちよさが出ます。
使うと良い場面
- FAQ やアコーディオンの開閉アイコン（開いた状態を見た目で伝える）
- モーダルやサイドメニューの閉じるボタン
- カードの詳細を出し入れする「もっと見る」ボタン
色を変えたいときは border と is-on 時の background を差し替えるだけで済みます。回転スピードは transition の秒数で調整できます。実運用では、開閉の状態がスクリーンリーダーにも伝わるよう aria-expanded を true と false で切り替えると親切です。動きを抑えたいユーザーのために prefers-reduced-motion で回転を弱める配慮も加えると、より丁寧な実装になります。
使用例・適したシーン
- 設定 UI
- 通知 ON/OFF
- ダークモード切替
よくある質問
プラスとバツ以外の記号でも使えますか
使えます。ボタン内の文字を矢印や三本線などに変えれば、回転で別の意味を表現できます。ただし45度回転で自然に見える記号を選ぶのがコツで、たとえばプラスはバツに、矢印は上下反転に向いています。
回転の弾むような動きを消したいです
CSSのtransitionで使っているcubic-bezierを、easeやlinearなど標準のイージングに置き換えると弾みがなくなります。秒数を短くすればさらにきびきびした切り替えになります。