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

有効期限表示付き会員証カード

会員番号と有効期限を記載したカード型デザインです。マイページでの会員証表示や、印刷用会員証テンプレートに応用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d10-12-05-card">
          <div class="d10-12-05-top">
            <span class="d10-12-05-label">MEMBERSHIP CARD</span>
            <span class="d10-12-05-rank">PREMIUM</span>
          </div>
          <p class="d10-12-05-owner">TARO YAMADA</p>
          <div class="d10-12-05-bottom">
            <span>会員番号 0012-3456</span>
            <span>有効期限 2026.12.31</span>
          </div>
        </div>

CSS

.d10-12-05-card{ width:100%; max-width:280px; padding:18px; border-radius:14px; background:linear-gradient(135deg,#312e81,#1e1b4b); color:#fff; }
        .d10-12-05-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
        .d10-12-05-label{ font-size:9px; letter-spacing:.1em; color:#c7d2fe; }
        .d10-12-05-rank{ font-size:11px; font-weight:800; padding:3px 8px; border-radius:4px; background:#facc15; color:#1e1b4b; }
        .d10-12-05-owner{ margin:0 0 18px; font-size:16px; font-weight:700; letter-spacing:.05em; }
        .d10-12-05-bottom{ display:flex; justify-content:space-between; font-size:9px; color:#c7d2fe; }

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