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

ポイント残高表示ウィジェット

会員が保有するポイント数を固定値で表示するウィジェットです。ポイント制の会員サイトでマイページに配置する用途を想定しています。

staticcss

プレビュー

ソースコード

HTML

<div class="d10-12-06-widget">
          <span class="d10-12-06-label">保有ポイント</span>
          <span class="d10-12-06-value">3,280<small>pt</small></span>
          <span class="d10-12-06-note">次回失効:2026.09.30</span>
        </div>

CSS

.d10-12-06-widget{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 26px; border-radius:12px; background:#fff7ed; border:1px solid #fed7aa; }
        .d10-12-06-label{ font-size:11px; color:#9a3412; font-weight:700; }
        .d10-12-06-value{ font-size:28px; font-weight:800; color:#c2410c; }
        .d10-12-06-value small{ font-size:13px; margin-left:2px; }
        .d10-12-06-note{ font-size:10px; color:#c2653f; }

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