パーツ番号 10-05-09 ・ CSSのみ

有効期限付きメンバーシップ表示

会員証を模したカードに氏名と「有効期限: 2026年12月31日」を表示する見本です。MemberPressのマイページで契約状況を確認させる用途に使えます。

membershipcss

プレビュー

ソースコード

HTML

<div class="d10-05-09-mcard">
          <div class="d10-05-09-head">
            <span class="d10-05-09-name">会員証</span>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#fbbf24" stroke-width="2"><path d="M12 2l2.6 6.2 6.7.5-5.1 4.4 1.6 6.6L12 16.9 6.2 19.7l1.6-6.6-5.1-4.4 6.7-.5z"/></svg>
          </div>
          <p class="d10-05-09-user">田中 太郎 様</p>
          <p class="d10-05-09-exp">有効期限: 2026年12月31日</p>
        </div>

CSS

.d10-05-09-mcard{
          width:100%;max-width:260px;border-radius:14px;padding:20px;
          background:linear-gradient(135deg,#1e293b,#0f172a);
          color:#fff;box-shadow:0 8px 22px rgba(15,23,42,.35);
        }
        .d10-05-09-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
        .d10-05-09-name{font-size:12px;font-weight:700;letter-spacing:.08em;color:#94a3b8}
        .d10-05-09-user{margin:0 0 6px;font-size:16px;font-weight:800}
        .d10-05-09-exp{margin:0;font-size:11.5px;color:#cbd5e1}

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