パーツ番号 02-05-12 ・ CSSのみ

優先度カラーラベル付きリスト

各項目に優先度を色分けしたタグを添えたリストです。タスク管理画面やお知らせの重要度表示に活用できます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d02-05-12-list">
          <li><span class="d02-05-12-tag d02-05-12-high">高</span>サーバー障害の復旧対応</li>
          <li><span class="d02-05-12-tag d02-05-12-mid">中</span>デザイン修正の反映</li>
          <li><span class="d02-05-12-tag d02-05-12-low">低</span>ドキュメントの更新</li>
        </ul>

CSS

.d02-05-12-list{list-style:none;margin:0;padding:0;width:100%;max-width:280px;font-size:13px;color:#333;display:flex;flex-direction:column;gap:10px;}
        .d02-05-12-list li{display:flex;align-items:center;gap:10px;}
        .d02-05-12-tag{flex:none;font-size:11px;font-weight:700;color:#fff;padding:2px 9px;border-radius:99px;}
        .d02-05-12-high{background:#e53935;}
        .d02-05-12-mid{background:#f59e0b;}
        .d02-05-12-low{background:#43a047;}

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