← 動的パーツギャラリーへ戻る

パーツ番号 10-03-10 ・ JavaScript使用

チャットバブル+既読表示

送信メッセージに時刻と「既読」を表示。読み込み後にチェックが2つに増え既読へ変化（自動アニメ）。WordPressのメッセージ機能デモに。

chatclickautojsinput

プレビュー

ソースコード

HTML

<div class="d10-03-10-chat">
          <div class="d10-03-10-row">
            <div class="d10-03-10-bub">今日の資料できたよ〜</div>
          </div>
          <div class="d10-03-10-metaline">
            <span class="d10-03-10-read" id="d10-03-10-read">送信済み</span>
            <span class="d10-03-10-check" id="d10-03-10-check">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#9aa4b2" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
              <svg class="d10-03-10-c2" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#9aa4b2" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
            </span>
            <span class="d10-03-10-time">14:32</span>
          </div>
        </div>

CSS

.d10-03-10 .d10-03-10-chat{width:240px;font-size:12px}
        .d10-03-10 .d10-03-10-row{display:flex;justify-content:flex-end}
        .d10-03-10 .d10-03-10-bub{max-width:180px;padding:9px 12px;border-radius:14px;background:linear-gradient(135deg,#6a8bff,#8a6cff);color:#fff;line-height:1.5;border-bottom-right-radius:4px}
        .d10-03-10 .d10-03-10-metaline{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:5px;color:#9aa4b2;font-size:10px}
        .d10-03-10 .d10-03-10-check{display:inline-flex}
        .d10-03-10 .d10-03-10-c2{margin-left:-9px;opacity:0;transition:opacity .3s}
        .d10-03-10 .d10-03-10-check.d10-03-10-double .d10-03-10-c2{opacity:1}
        .d10-03-10 .d10-03-10-check.d10-03-10-double svg{stroke:#4a9dff}
        .d10-03-10 .d10-03-10-read.d10-03-10-on{color:#4a9dff;font-weight:700}

JavaScript

(function(){
        var check=document.getElementById('d10-03-10-check'),read=document.getElementById('d10-03-10-read');
        setTimeout(function(){
          check.classList.add('d10-03-10-double');read.textContent='既読';read.classList.add('d10-03-10-on');
        },1400);
      })();

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