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

オンラインステータス付きDMリスト

アバターに在席状況ドットを重ねたメッセージ一覧。未読は数字バッジで強調し、行にホバーで背景が変化します。WordPressの会員向けメッセージ機能に。

chathovercss

プレビュー

ソースコード

HTML

<ul class="d10-03-12-list">
          <li>
            <span class="d10-03-12-avwrap"><span class="d10-03-12-av" style="--g1:#a1c4fd;--g2:#c2e9fb">R</span><span class="d10-03-12-dot d10-03-12-on"></span></span>
            <span class="d10-03-12-body"><span class="d10-03-12-nm">Ren</span><span class="d10-03-12-msg">今から向かうね！</span></span>
            <span class="d10-03-12-badge">2</span>
          </li>
          <li>
            <span class="d10-03-12-avwrap"><span class="d10-03-12-av" style="--g1:#f6a6ff;--g2:#ff8b8b">M</span><span class="d10-03-12-dot d10-03-12-on"></span></span>
            <span class="d10-03-12-body"><span class="d10-03-12-nm">Mika</span><span class="d10-03-12-msg">写真ありがとう！</span></span>
          </li>
          <li>
            <span class="d10-03-12-avwrap"><span class="d10-03-12-av" style="--g1:#d4d7dd;--g2:#b8bcc4">S</span><span class="d10-03-12-dot"></span></span>
            <span class="d10-03-12-body"><span class="d10-03-12-nm">Sora</span><span class="d10-03-12-msg">了解です</span></span>
          </li>
        </ul>

CSS

.d10-03-12 .d10-03-12-list{list-style:none;margin:0;padding:0;width:240px;display:flex;flex-direction:column;gap:2px;font-size:12px}
        .d10-03-12 .d10-03-12-list li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;transition:background .2s}
        .d10-03-12 .d10-03-12-list li:hover{background:#f2f5fb}
        .d10-03-12 .d10-03-12-avwrap{position:relative;flex:none}
        .d10-03-12 .d10-03-12-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;background:linear-gradient(135deg,var(--g1),var(--g2))}
        .d10-03-12 .d10-03-12-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#c3cbe0;border:2px solid #fff}
        .d10-03-12 .d10-03-12-dot.d10-03-12-on{background:#4ade80}
        .d10-03-12 .d10-03-12-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
        .d10-03-12 .d10-03-12-nm{font-weight:700;color:#333}
        .d10-03-12 .d10-03-12-msg{color:#9aa4b2;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .d10-03-12 .d10-03-12-badge{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#6a8bff;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

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