チャットアプリによくある吹き出しの作成例

はじめに

新年1発目です

どういうものか

LINEとかによくあるやつです。

アイコンがあって、会話の本文があって、その会話の本文からアイコンに向かって

にょいっと出てるあれですね。

一例

TypeScript、tailwindcssを使っている都合上、cnとか使ってますが、大枠のイメージは掴めるはずです。 なお、user同士の会話ということなので「あなたは誰なのか」という情報がもらえている前提です。 (自分か自分以外なのかという条件分岐が必須です)

      <div className="relative (そのほか)">
        {* 吹き出しの三角形 *}
        <div
          className={cn(
            "absolute (top, left等で位置指定)",
             isCurrentUser
              ? "-left-5 [clip-path:polygon(好きなようにいじって)]"
              : "-right-5 [clip-path:polygon(好きなようにいじって)]"
          )}
        ></div>

      {実際の本文 tsxを使っていれば childrenとか}

      </div>

仕組みとしては、

大枠のdivに対してabsoluteで設定した三角形を

自分か否かで頂点の向く方向をわけ、

その後高さ等を調節するという感じです。

relative、absoluteは大事なのでそこは必須です。

一番肝心なところ

このclip-pathとかいうやつだと思います。

cssだけで三角形を作るって案外大変なんですよね。

そんな方は調べれば色々出てくるかと思いますが、下記のやり方を推奨します。

1. クリップパスを使った三角形ジェネレーター | 便利ツール集 by mosyaでcss用のコードを作成する

2. claude等を使って、出力されたコードをtailwindcssに置き換えてもらう

終わりに

フロントやってますが、今年はbackend＋インフラに専念したい！