フローティングアクションボタン（FAB）
FAB(フローティングアクションボタン)は、画面の隅に常駐し続ける円形のボタンです。 position でページの右下に固定し、 width と height を同じ 56px 、 border-radius:50% で正円にしています。
解説
FAB(フローティングアクションボタン)は、画面の隅に常駐し続ける円形のボタンです。position でページの右下に固定し、width と height を同じ 56px、border-radius:50% で正円にしています。box-shadow でページから浮いて見せ、ホバー時は transform:scale(1.1) rotate(90deg) で少し拡大しながら回転する遊びを加えています。スクロールしても定位置に残るため「いつでも押せる主要アクション」を一つだけ置くのに向いた UI です。
使う場面
- チャットサポートやお問い合わせの起動ボタン
- 新規作成・投稿などアプリ風サービスの主アクション
- ページ最下部からトップへ戻るボタン
実運用では position:absolute をページ全体に固定する position:fixed に変えると、スクロールしても画面右下に貼り付きます。色は background と影の rgba を同系にそろえ、配置は bottom と right の値で調整します。中身の「＋」は記号でなく意味のあるアイコンに置き換え、aria-label で操作内容を必ず説明してください。本文や固定フッターと重ならない位置に置くのも大切です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
スクロールしても画面の隅に貼り付かせたいです。
このデモは枠内に収めるため position:absolute を使っています。実際のページで常に右下へ固定したい場合は、ボタンの position を fixed に変えると、スクロールしても画面の右下に貼り付きます。
ボタンの大きさや位置は変えられますか？
大きさは width と height を同じ値で増減し、border-radius:50% を保てば正円のまま拡縮できます。位置は bottom と right(初期 24px)の数値で画面隅からの距離を調整します。