パーツ番号 09-09-11 ・ CSSのみ

難易度・スキルレベル表示

塗りつぶしの粒の数でレベルの高さを示す静止表示です。講座一覧やスキル診断結果の表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-11-wrap">
          <div class="d09-09-11-item"><span class="d09-09-11-lv d09-09-11-lv-1"><i></i><i></i><i></i></span><span class="d09-09-11-txt">初級</span></div>
          <div class="d09-09-11-item"><span class="d09-09-11-lv d09-09-11-lv-2"><i></i><i></i><i></i></span><span class="d09-09-11-txt">中級</span></div>
          <div class="d09-09-11-item"><span class="d09-09-11-lv d09-09-11-lv-3"><i></i><i></i><i></i></span><span class="d09-09-11-txt">上級</span></div>
        </div>

CSS

.d09-09-11-wrap{display:flex;flex-direction:column;gap:12px;font-family:sans-serif}
        .d09-09-11-item{display:flex;align-items:center;gap:10px}
        .d09-09-11-lv{display:flex;gap:4px}
        .d09-09-11-lv i{width:9px;height:9px;border-radius:50%;background:#e5e7eb;display:inline-block;font-style:normal}
        .d09-09-11-lv-1 i:nth-child(1){background:#f59e0b}
        .d09-09-11-lv-2 i:nth-child(1),.d09-09-11-lv-2 i:nth-child(2){background:#3b82f6}
        .d09-09-11-lv-3 i{background:#ef4444}
        .d09-09-11-txt{font-size:13px;color:#374151}

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