← 静的パーツギャラリーへ戻る

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

星の数で段階を示すランクバッジ

星アイコンの点灯数でブロンズ・ゴールド・プラチナの段階を表す静止見本です。会員ランク制度やレビュー評価の等級表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-15-05-wrap">
          <div class="d09-15-05-rank">
            <p class="d09-15-05-name">ブロンズ</p>
            <div class="d09-15-05-stars">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="#f59e0b"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="#e2e8f0"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="#e2e8f0"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
            </div>
          </div>
          <div class="d09-15-05-rank">
            <p class="d09-15-05-name">ゴールド</p>
            <div class="d09-15-05-stars">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="#f59e0b"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="#f59e0b"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="#e2e8f0"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
            </div>
          </div>
          <div class="d09-15-05-rank">
            <p class="d09-15-05-name">プラチナ</p>
            <div class="d09-15-05-stars">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="#f59e0b"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="#f59e0b"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="#f59e0b"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
            </div>
          </div>
        </div>

CSS

.d09-15-05-wrap{display:flex;flex-direction:column;gap:10px}
        .d09-15-05-rank{display:flex;align-items:center;gap:12px;background:#f8fafc;border-radius:8px;padding:7px 14px;width:150px}
        .d09-15-05-name{margin:0;font-size:12px;font-weight:700;color:#334155;width:62px}
        .d09-15-05-stars{display:flex;gap:2px}

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