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

既読マーク付きメッセージ(静止)

各メッセージに既読・未読の表示が固定で添えられたスタイルです。連絡ツールやチャットUIのモックアップに向いています。

staticcss

プレビュー

ソースコード

HTML

<div class="chat">
          <div class="row">
            <p class="bub">写真送りますね。</p>
            <span class="stat">既読</span>
          </div>
          <div class="row">
            <p class="bub">確認しました、ありがとうございます。</p>
            <span class="stat">既読</span>
          </div>
          <div class="row">
            <p class="bub">では来週の日程で進めます。</p>
            <span class="stat unread">未読</span>
          </div>
        </div>

CSS

.d10-10-02 .chat{ width:100%; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
        .d10-10-02 .row{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; max-width:78%; }
        .d10-10-02 .bub{ margin:0; padding:9px 13px; border-radius:14px 14px 4px 14px; font-size:12.5px; line-height:1.5; background:#6366f1; color:#fff; }
        .d10-10-02 .stat{ font-size:10px; color:#9ca3af; padding-right:2px; }
        .d10-10-02 .stat.unread{ color:#f59e0b; font-weight:700; }

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