パーツ番号 10-03-01 ・ CSSのみ

チャット吹き出し(左右)

相手は左のグレー、自分は右のカラー吹き出しで会話を表現。順に出現するアニメ付き。WordPressのお客様の声やLINE風の使い方紹介に。

chatscrollcss

プレビュー

ソースコード

HTML

<div class="d10-03-01-chat">
          <div class="d10-03-01-row d10-03-01-left io-reveal">
            <span class="d10-03-01-av" style="--g1:#a1c4fd;--g2:#c2e9fb">R</span>
            <div class="d10-03-01-bub">やっほー、今どこにいるの？</div>
          </div>
          <div class="d10-03-01-row d10-03-01-right io-reveal">
            <div class="d10-03-01-bub d10-03-01-me">駅前のカフェだよ、来る？</div>
            <span class="d10-03-01-av" style="--g1:#f6a6ff;--g2:#ff8b8b">M</span>
          </div>
          <div class="d10-03-01-row d10-03-01-left io-reveal">
            <span class="d10-03-01-av" style="--g1:#a1c4fd;--g2:#c2e9fb">R</span>
            <div class="d10-03-01-bub">行く行く！すぐ着くよ〜</div>
          </div>
          <div class="d10-03-01-row d10-03-01-right io-reveal">
            <div class="d10-03-01-bub d10-03-01-me">待ってるね☕</div>
            <span class="d10-03-01-av" style="--g1:#f6a6ff;--g2:#ff8b8b">M</span>
          </div>
        </div>

CSS

.d10-03-01 .d10-03-01-chat{width:240px;display:flex;flex-direction:column;gap:10px;font-size:12px}
        .d10-03-01 .d10-03-01-row{display:flex;align-items:flex-end;gap:6px}
        .d10-03-01 .d10-03-01-right{justify-content:flex-end}
        .d10-03-01 .d10-03-01-av{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px;background:linear-gradient(135deg,var(--g1),var(--g2))}
        .d10-03-01 .d10-03-01-bub{max-width:160px;padding:8px 11px;border-radius:14px;line-height:1.5;background:#eef1f5;color:#333;border-bottom-left-radius:4px}
        .d10-03-01 .d10-03-01-me{background:linear-gradient(135deg,#6a8bff,#8a6cff);color:#fff;border-bottom-left-radius:14px;border-bottom-right-radius:4px}

クラス名 .d10-03-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。