パーツ番号 01-12-08 ・ CSSのみ

スタンプカード風デザイン

複数のスタンプ枠が並ぶポイントカードの構成。店舗の会員特典ページや来店促進の表示に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="stampcard">
          <p class="sc-ttl">スタンプカード</p>
          <div class="sc-grid">
            <span class="sc-cell sc-done">✓</span>
            <span class="sc-cell sc-done">✓</span>
            <span class="sc-cell sc-done">✓</span>
            <span class="sc-cell"></span>
            <span class="sc-cell"></span>
            <span class="sc-cell"></span>
          </div>
          <p class="sc-note">3個貯まるとドリンク1杯無料</p>
        </div>

CSS

.d01-12-08{ background:#fdf3ea; }
        .d01-12-08 .stampcard{ width:100%; max-width:240px; padding:18px 20px; background:#fff; border:1px dashed #d19a5a; }
        .d01-12-08 .sc-ttl{ font-size:12px; font-weight:700; color:#8a5a2a; margin:0 0 10px; text-align:center; }
        .d01-12-08 .sc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
        .d01-12-08 .sc-cell{ aspect-ratio:1/1; border:1px solid #e0c39a; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:#c98a3a; }
        .d01-12-08 .sc-done{ background:#f6e2c4; font-weight:700; }
        .d01-12-08 .sc-note{ font-size:10px; color:#8a6a45; text-align:center; margin:0; }

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