# チャット吹き出しのCSS実装

> メッセージUIの吹き出し。相手は左・自分は右に寄せ、発話者側の下角だけborder-radiusを小さくするモダンな尻尾表現です。

- カテゴリ: 表示・フィードバック
- URL: https://www.css-dictionary.com/recipes/chat-bubbles/

## HTML

```html
<div class="chat">
  <div class="msg">
    <span class="chat-avatar" aria-hidden="true"></span>
    <p class="bubble">こんにちは！注文した器の配送状況を確認したいです。</p>
  </div>
  <div class="msg me">
    <p class="bubble">かしこまりました。ご注文番号をお願いします。</p>
  </div>
  <div class="msg">
    <span class="chat-avatar" aria-hidden="true"></span>
    <p class="bubble">1234-5678 です。</p>
  </div>
</div>
```

## CSS

```css
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}

.msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 85%;
}

.msg.me {
  align-self: flex-end; /* 自分の発言は右寄せ */
}

.chat-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d9c79a, #8a6d3b);
}

.bubble {
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2d8c2;
  font-size: 13px;
  line-height: 1.6;
}

/* 発話者側の下角だけ小さくして「尻尾」に見せる */
.msg:not(.me) .bubble {
  border-bottom-left-radius: 4px;
}

.msg.me .bubble {
  background: #b0413e;
  border-color: #b0413e;
  color: #fff;
  border-bottom-right-radius: 4px;
}
```

## 仕組みの解説

左右の振り分けは、縦flexコンテナの中で自分の発言にだけ align-self: flex-end を掛ける方式です。吹き出しの「尻尾」は三角形を疑似要素で描く方法もありますが、発話者側の下角だけ border-radius を4pxに絞る方が実装が軽く、モダンなメッセージアプリの見た目になります。アバターは align-items: flex-end で吹き出しの下端に揃えています。

## 実装のポイント

発言の連続（同じ人が続けて話す）では2つ目以降のアバターを省略すると、実際のチャットUIらしくなります。時刻表示はtime要素で添えてください。

## AIに依頼するときの文例

チャットの吹き出しUIを作ってください。相手は左・自分は右（align-self: flex-end）に振り分け、尻尾は疑似要素ではなく発話者側の下角のborder-radiusだけ4pxに絞る方式で表現してください。

## 使っているプロパティ

- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [flex-direction](https://www.css-dictionary.com/property/flex-direction.md)
- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [gap](https://www.css-dictionary.com/property/gap.md)