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

人気タグランキング付き選択パネル

順位と人気度バーを添えてタグの利用頻度を可視化したパネルです。求人サイトの人気キーワード一覧や検索候補の見本に活用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-11-panel">
          <div class="d11-16-11-row"><span class="d11-16-11-rank">1</span><span class="d11-16-11-name">在宅ワーク</span><span class="d11-16-11-bar"><i style="width:88%"></i></span></div>
          <div class="d11-16-11-row"><span class="d11-16-11-rank">2</span><span class="d11-16-11-name">副業</span><span class="d11-16-11-bar"><i style="width:72%"></i></span></div>
          <div class="d11-16-11-row"><span class="d11-16-11-rank">3</span><span class="d11-16-11-name">転職</span><span class="d11-16-11-bar"><i style="width:55%"></i></span></div>
        </div>

CSS

.d11-16-11-panel{width:100%;max-width:280px;display:flex;flex-direction:column;gap:10px;font-family:sans-serif}
        .d11-16-11-row{display:flex;align-items:center;gap:10px}
        .d11-16-11-rank{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#1f2937;color:#fff;font-size:10.5px;font-weight:700;border-radius:4px}
        .d11-16-11-name{width:66px;flex-shrink:0;font-size:12.5px;font-weight:600;color:#374151}
        .d11-16-11-bar{flex:1;height:7px;border-radius:4px;background:#eef2f7;overflow:hidden}
        .d11-16-11-bar i{display:block;height:100%;background:#6366f1;border-radius:4px}

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