FAB 円形展開メニュー
中央の「+」ボタンを押すと、周囲にアイコンが弧を描いて飛び出す円形メニュー（FAB）です。動きの中心は CSS で、各アイテムは普段 opacity:0; pointer-events:none で中央に重なって隠れており、親に is-open が付くと nth-child ごとに別々の translate 値で外…
解説
中央の「+」ボタンを押すと、周囲にアイコンが弧を描いて飛び出す円形メニュー（FAB）です。動きの中心は CSS で、各アイテムは普段 opacity:0; pointer-events:none で中央に重なって隠れており、親に is-open が付くと nth-child ごとに別々の translate 値で外側へ移動します。transition にバネのような cubic-bezier を使い、transition-delay を --i 変数で少しずつずらすことで、順番にポンポンと開く演出を作っています。JavaScript は「+」ボタンのクリックで is-open を付け外しし、aria-expanded を切り替えるだけです。
使いどころ
- 共有・新規作成など、補助的なアクションをまとめたい画面右下の FAB
- ユニークな動きで印象づけたいキャンペーンサイト
- よく使う操作を素早く呼び出したいアプリ的 UI
展開する角度や距離は各 nth-child の translate 値で調整でき、開く速さやバネ感は transition のイージングで変わります。注意点として、派手な動きは prefers-reduced-motion を尊重し、動きを抑える設定の利用者には移動量やアニメを弱めると親切です。各アイコンには aria-label を付けると操作が分かりやすくなります。
使用例・適したシーン
- コーポレートサイトのグローバルナビ
- EC サイトのヘッダー
- SaaS の管理画面
- モバイル向け Web アプリ
よくある質問
アイコンが飛び出す位置を変えたいです。
各アイテムの展開先は CSS の .cm.is-open .cm__item:nth-child(...) に書かれた translate の値で決まっています。この X・Y のオフセットを変えると、放射状に広げたり、縦一列に並べたりと展開の形を変えられます。開く順番のずれは --i 変数と transition-delay で制御しています。
アニメーションが苦手な人への配慮はできますか？
はい。CSS に prefers-reduced-motion のメディアクエリを追加し、その中で transition を弱めるか移動量を小さくすると、動きを減らす設定にしている利用者に配慮できます。開閉状態は aria-expanded で伝わるようになっており、各アイコンに aria-label を付ければ操作の意味も明確になります。