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

並び替えハンドル付きタグ入力欄(静止)

各タグの左端にドラッグハンドルを添え、並び替え可能であることを示す静止デザインです。優先順位付きのToDoタグ管理画面に応用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-12-field">
          <div class="d11-16-12-chip"><span class="d11-16-12-handle"></span>優先度高</div>
          <div class="d11-16-12-chip"><span class="d11-16-12-handle"></span>要確認</div>
          <div class="d11-16-12-chip"><span class="d11-16-12-handle"></span>後回し</div>
        </div>

CSS

.d11-16-12-field{width:100%;max-width:280px;display:flex;flex-direction:column;gap:8px;font-family:sans-serif}
        .d11-16-12-chip{display:flex;align-items:center;gap:10px;box-sizing:border-box;padding:8px 12px;border:1.5px solid #e2e8f0;border-radius:7px;background:#f8fafc;font-size:12.5px;font-weight:600;color:#334155}
        .d11-16-12-handle{width:10px;height:10px;flex-shrink:0;background-image:radial-gradient(#94a3b8 1.4px,transparent 1.4px);background-size:5px 5px;background-repeat:round}

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