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

リアクション絵文字付きメッセージ(固定)

絵文字リアクションが常時表示されたメッセージデザインです。SNS風コミュニケーション画面の紹介に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="chat">
          <div class="row them">
            <p class="bub">今日はありがとうございました！</p>
            <span class="react">👍 2</span>
          </div>
          <div class="row me">
            <p class="bub">こちらこそです。</p>
            <span class="react">❤️ 1</span>
          </div>
        </div>

CSS

.d10-10-07 .chat{ width:100%; display:flex; flex-direction:column; gap:14px; }
        .d10-10-07 .row{ position:relative; display:flex; }
        .d10-10-07 .row.me{ justify-content:flex-end; }
        .d10-10-07 .bub{ margin:0; max-width:74%; padding:9px 13px; border-radius:13px; font-size:12.5px; background:#f1f2f6; color:#333; }
        .d10-10-07 .row.me .bub{ background:#6366f1; color:#fff; }
        .d10-10-07 .react{ position:absolute; bottom:-11px; left:14px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:1px 7px; font-size:10.5px; }
        .d10-10-07 .row.me .react{ left:auto; right:14px; }

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