ステータスバッジ
このバッジは、項目の状態をひと目で伝える小さなラベルです。実装は CSS のみで、 display:inline-flex に border-radius:999px を組み合わせて角丸のピル形にし、 badge--success や badge--error といった修飾クラスで背景色と文字色のペアを切り替えます…
解説
このバッジは、項目の状態をひと目で伝える小さなラベルです。実装は CSS のみで、display:inline-flex に border-radius:999px を組み合わせて角丸のピル形にし、badge--success や badge--error といった修飾クラスで背景色と文字色のペアを切り替えます。色は薄い背景に濃い文字を合わせ、彩度を抑えつつ読みやすさを保つ配色になっています。JavaScript は不要で、HTML にクラスを足すだけで使えます。
使う場面
- 管理画面で「公開中」「下書き」「審査中」など投稿の状態を示すとき
- 注文やタスクの進行状況を一覧でわかりやすく見せるとき
- 通知やお知らせの種類を色で区別したいとき
色の追加は新しい修飾クラスを定義し、背景と文字の組み合わせを足すだけで増やせます。注意したいのは、色だけで意味を伝えると色覚に配慮できないため、必ずテキストラベルを併用することです。本コードは white-space:nowrap で折り返しを防ぎ、letter-spacing で字間を整えています。サイズを変えたい場合は padding と font-size をまとめて調整すると形が崩れません。
よくある質問
新しい色のバッジを追加するにはどうしますか
badge--success のような修飾クラスを参考に、新しいクラス名で background と color の組み合わせを定義し、HTML の span にそのクラスを追加するだけです。薄い背景に濃い文字を合わせると統一感が保てます。
色だけで状態を区別しても大丈夫ですか
おすすめしません。色の違いがわかりにくい人にも伝わるよう、必ず公開中や審査中といったテキストラベルを併用してください。本コードも文字を入れる前提で作られています。