TailwindCSSでフローティングアクションボタンを作ってみる

バージョン

React 18.2.0
TailwindCSS v3.2

はじめに

今回は React + TypeScript + TailwindCSS で
フローティングアクションボタンを作ってみました。

もろもろの導入に関しては以前の記事を参照ください。
https://zenn.dev/catallaxy_dev/articles/tailwindcss-create-application-form

実装編

では実装してみます。

<div
  className="fixed z-50 bottom-10 right-10 py-5 px-2
  border-2 bg-green-400 rounded-full cursor-pointer"
  onClick={() => {
    window.open("https://www.google.com/?hl=ja");
  }}
>
  ボタン
</div>

押されると画面遷移するシンプルなボタンです。

解説編

まず Position を fixed に設定します。
viewport に対する相対位置で配置することで、要素が特定の場所に固定されます。
これにより画面をスクロールしても一緒に付いてくる要素が作れます。

さらに bottom-10 と right-10 を指定して、右下にボタンを配置します。
z-50は Z-Index です。ボタンが手前に来るように順序を制御しています。
これにより要素が重ね合わさった時に、ボタンが他の要素に覆いかぶさる形で表示できます。

次に装飾として、 bg-green-400 で背景色を指定。
border-2 で周りに線をつけ、rounded-full で外枠を丸くしてみました。
この辺はお好みで、アイコンとかにしても良いかと思います。

あと cursor-pointer でマウスカーソルのリンクポインターに指定しています。

これだけです。
以上でフローティングアクションボタンを実装できました。

参考

https://tailwindcss.com/docs/guides/create-react-app