パーツ番号 10-10-04 ・ CSSのみ

グループチャット風(複数人の発言)

複数の発言者を色分けしたアバターで並べたグループチャットの見た目です。社内ツールやコミュニティ紹介に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="chat">
          <div class="row">
            <span class="av a1">S</span>
            <div class="bub"><span class="name">佐藤</span><p>資料できました。</p></div>
          </div>
          <div class="row">
            <span class="av a2">K</span>
            <div class="bub"><span class="name">木村</span><p>確認しますね。</p></div>
          </div>
          <div class="row">
            <span class="av a3">T</span>
            <div class="bub"><span class="name">田中</span><p>私も見ておきます。</p></div>
          </div>
        </div>

CSS

.d10-10-04 .chat{ width:100%; display:flex; flex-direction:column; gap:10px; }
        .d10-10-04 .row{ display:flex; gap:8px; align-items:flex-start; }
        .d10-10-04 .av{ width:26px; height:26px; border-radius:50%; flex:none; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d10-10-04 .a1{ background:#6366f1; }
        .d10-10-04 .a2{ background:#10b981; }
        .d10-10-04 .a3{ background:#f59e0b; }
        .d10-10-04 .bub{ background:#f1f2f6; border-radius:10px; padding:7px 12px; }
        .d10-10-04 .name{ display:block; font-size:10px; font-weight:700; color:#6366f1; margin-bottom:2px; }
        .d10-10-04 .bub p{ margin:0; font-size:12px; color:#333; }

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