CSS辞書
UIレシピ集に戻る

フローティングアクションボタン

ボタン・操作Baseline 広く利用可能

画面右下に追従する円形のアクションボタン(FAB)。position: fixedとinsetの1行で配置し、ホバーで浮き上がります。

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

HTML
CSS

仕組みの解説

position: fixed でビューポート基準に固定し、inset: auto 16px 16px auto の1行で「右下から16px」を表現します(top/right/bottom/leftを個別に書くより短い)。テキストは「+」だけなので、ボタンの意味は aria-label で伝えます。ホバー時は transform と影の強調で浮き上がりを演出します。

実装のポイント

モバイル実機では下端のブラウザUIと重なることがあります。env(safe-area-inset-bottom)を足すと安全です。

AIに依頼するときの文例

画面右下に固定表示される円形のフローティングアクションボタン(FAB)を作ってください。insetで配置し、aria-labelでボタンの意味を伝え、ホバーで浮き上がるエフェクトとフォーカスリングを付けてください。

使っているプロパティ