パーツ番号 04-15-07 ・ CSSのみ

優先順位が並べ替え済みのリスト(静止)

ドラッグハンドル付きで順位が確定した状態を固定表示したリスト。重要度ランキングアンケートのUI見本として使える。

staticcss

プレビュー

ソースコード

HTML

<ol class="d04-15-07-list">
          <li class="d04-15-07-row"><span class="d04-15-07-rank">1</span><span class="d04-15-07-handle">&#8942;&#8942;</span><span class="d04-15-07-label">価格の安さ</span></li>
          <li class="d04-15-07-row"><span class="d04-15-07-rank">2</span><span class="d04-15-07-handle">&#8942;&#8942;</span><span class="d04-15-07-label">配送の速さ</span></li>
          <li class="d04-15-07-row"><span class="d04-15-07-rank">3</span><span class="d04-15-07-handle">&#8942;&#8942;</span><span class="d04-15-07-label">品揃え</span></li>
        </ol>

CSS

.d04-15-07-list{list-style:none;margin:0;padding:0;width:100%;max-width:230px}
        .d04-15-07-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:7px}
        .d04-15-07-rank{width:20px;height:20px;border-radius:50%;background:#6366f1;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
        .d04-15-07-handle{color:#cbd5e1;font-size:12px;letter-spacing:-2px}
        .d04-15-07-label{font-size:12px;color:#334155}

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