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

読了バッジコレクション(獲得済み/未獲得スタンプ風)

読み進めた区切りごとにスタンプを集めていくゲーム感覚の読了バッジ見本です。連載コラムや学習コンテンツの読了達成を可視化するギミックとして使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-10-12-wrap">
          <p class="d06-10-12-ttl">読了スタンプ</p>
          <div class="d06-10-12-stamps">
            <div class="d06-10-12-stamp d06-10-12-got"><span>25%</span></div>
            <div class="d06-10-12-stamp d06-10-12-got"><span>50%</span></div>
            <div class="d06-10-12-stamp d06-10-12-got"><span>75%</span></div>
            <div class="d06-10-12-stamp"><span>100%</span></div>
          </div>
        </div>

CSS

.d06-10-12-wrap{width:100%;max-width:280px;font-family:sans-serif}
        .d06-10-12-ttl{margin:0 0 12px;font-size:12.5px;font-weight:bold;color:#222}
        .d06-10-12-stamps{display:flex;gap:10px;flex-wrap:wrap}
        .d06-10-12-stamp{width:56px;height:56px;border-radius:50%;border:2px dashed #d7dae5;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:bold;color:#bbb;box-sizing:border-box}
        .d06-10-12-got{border:2px solid #4a6fd8;color:#4a6fd8;background:#eef2ff;transform:rotate(-6deg)}
        .d06-10-12-got:nth-child(2){transform:rotate(4deg)}
        .d06-10-12-got:nth-child(3){transform:rotate(-3deg)}

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