React + styled-componentsでフローティングバナーを実装する

環境

React 18.2.0
Next.js 13.2.3
styled-components 5.3.8

完成図

今回は、このようなフローティングバナーを作っていきたいと思います。

以前投稿した「フローティングアクションボタンを作る方法」と基本は同じです。
https://zenn.dev/catallaxy_dev/articles/tailwindcss-create-floating-action-button

解説編

作るものとしては、バナー本体とバナーを閉じるためのボタン（クローズボタン）を実装します。
※バナー画像とクローズボタンの画像は先に用意してください。

まずは、CSS のposition: fixed;で要素の位置を固定します。
これによりバナーとクローズボタンが絶対位置で表示されるようになります。

次にbottomとrightで位置を調整していきましょう。

ボタンは、バナーに被せてz-indexでバナーより前面に来るよう配置します。
こうすることでバナー内にクローズボタンを実装できます。

バナー部分は onClick で任意の URL を指定します。

クローズボタンも同様に onClick を用います。
そちらの方は、バナーとクローズボタンの親要素（div）の id を取得し、
その要素をremove して画面上から削除するという感じです。

以下のコードは、わかりやすいように必要箇所のみ表示しています。
あと、画像に関しては next/image ではなく、自前で実装していたりしているので、
全容が知りたい方は CodeSandbox を確認してもらえればと思います。

~~~

const FloatingBanner = () => {
  return (
    <div id="floatingBanner">
      <CloseButton>
        <span
          onClick={() => {
            const floatingBanner = document.getElementById("floatingBanner");
            floatingBanner.remove();
          }}
        >
          <Image src="/images/Close-Icon.png" width={33} height={33} />
        </span>
      </CloseButton>
      <ImageWrapper
        onClick={() => {
          window.open("https://zenn.dev/shimajiri");
        }}
      >
        <Image src="/images/Banana-Banner.png" width={200} height={200} />
      </ImageWrapper>
    </div>
  );
};

const CloseButton = styled.div`
  position: fixed;
  z-index: 1;
  bottom: 12.6rem;
  right: 65px;
  cursor: pointer;
`;

const ImageWrapper = styled.div`
  position: fixed;
  bottom: 2.5rem;
  right: 60px;
  cursor: pointer;
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6));
`;

~~~~

以上、フローティングバナーの作り方でした。
関係ないですがバナナのバナーは、気合い入れて作りました 🍌

position: fixedをうまく使えば色々と実装できるので、
興味がある方は是非試してみてください ✋