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

アクティビティフィード

アイコン付きの時系列ログをリスト表示。WordPress管理画面の操作履歴や会員マイページの通知一覧として使えます。

css

プレビュー

ソースコード

HTML

<div class="d05-05-04-card">
          <div class="d05-05-04-head">最近のアクティビティ</div>
          <ul class="d05-05-04-list">
            <li>
              <span class="d05-05-04-ic d05-05-04-blue"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></span>
              <div><b>記事「夏の新商品」</b>を更新<em>3分前</em></div>
            </li>
            <li>
              <span class="d05-05-04-ic d05-05-04-green"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg></span>
              <div><b>注文 #1042</b> を承認<em>21分前</em></div>
            </li>
            <li>
              <span class="d05-05-04-ic d05-05-04-purple"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg></span>
              <div><b>山田さん</b>が新規登録<em>1時間前</em></div>
            </li>
            <li>
              <span class="d05-05-04-ic d05-05-04-amber"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span>
              <div><b>お問い合わせ</b>が届きました<em>2時間前</em></div>
            </li>
          </ul>
        </div>

CSS

.d05-05-04{background:#f8fafc}
        .d05-05-04-card{width:280px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d05-05-04-head{font-size:12px;font-weight:700;color:#475569;margin-bottom:12px}
        .d05-05-04-list{list-style:none;margin:0;padding:0}
        .d05-05-04-list li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid #f1f5f9;font-size:12.5px;color:#334155}
        .d05-05-04-list li:first-child{border-top:none}
        .d05-05-04-list b{font-weight:700;color:#0f172a}
        .d05-05-04-list em{display:block;font-style:normal;font-size:10.5px;color:#94a3b8;margin-top:2px}
        .d05-05-04-ic{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
        .d05-05-04-blue{background:#3b82f6}.d05-05-04-green{background:#22c55e}.d05-05-04-purple{background:#8b5cf6}.d05-05-04-amber{background:#f59e0b}

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