バッジ、ラベル、タグは、カテゴリ、状態、新着、割引、必須項目などを短く伝えるための小さなUIです。
小さい部品ですが、色、余白、角丸、文字サイズを整えるだけで、一覧やカードの見やすさがかなり変わります。
この記事では、CSSで作れるバッジ・ラベル・タグのデザインを20個まとめました。ブログ、カード、フォーム、管理画面などでコピーして使いやすい形にしています。
1. 基本の丸いタグ
カテゴリ表示に使いやすい、もっとも基本的なタグです。
<span class="tag-basic">CSS</span>.tag-basic {
display: inline-block;
padding: 4px 10px;
color: #2563eb;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
background: #eff6ff;
border-radius: 9999px;
}バッジは小さくしすぎず、短い単語でも読める余白を残します。
2. 枠線だけのラベル
背景色を強くしたくない場合は、枠線だけのラベルにします。
<span class="label-outline">HTML</span>.label-outline {
display: inline-block;
padding: 4px 10px;
color: #374151;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
border: 1px solid #d1d5db;
border-radius: 9999px;
}背景が白いカードの中でも、主張しすぎず使えます。
3. NEWバッジ
新着記事や新商品には、短く目立つNEWバッジが使いやすいです。
<span class="badge-new">NEW</span>.badge-new {
display: inline-block;
padding: 3px 8px;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0;
background: #dc2626;
border-radius: 4px;
}短い英字バッジでも、文字間を詰めすぎない方が読みやすいです。
4. 必須ラベル
フォームの必須項目に使いやすいラベルです。
<label class="label-with-required">
お名前
<span class="badge-required">必須</span>
</label>.label-with-required {
display: inline-flex;
gap: 8px;
align-items: center;
font-weight: 700;
}
.badge-required {
display: inline-block;
padding: 2px 7px;
color: #fff;
font-size: 12px;
line-height: 1.4;
background: #dc2626;
border-radius: 9999px;
}フォーム全体の整え方は、CSSフォームデザイン集 と組み合わせると自然です。
5. ステータスバッジ
公開中、確認中、停止中などの状態を表示するバッジです。
<span class="status-badge is-success">公開中</span>
<span class="status-badge is-warning">確認中</span>
<span class="status-badge is-danger">停止中</span>.status-badge {
display: inline-block;
padding: 4px 10px;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
border-radius: 9999px;
}
.status-badge.is-success {
color: #166534;
background: #dcfce7;
}
.status-badge.is-warning {
color: #92400e;
background: #fef3c7;
}
.status-badge.is-danger {
color: #991b1b;
background: #fee2e2;
}状態は色だけでなく、「公開中」「確認中」のような文字でも伝えます。
6. 点つきステータスラベル
オンライン状態や進行状況には、小さな点を添えるとわかりやすくなります。
<span class="status-dot">オンライン</span>.status-dot {
display: inline-flex;
gap: 7px;
align-items: center;
color: #166534;
font-size: 13px;
font-weight: 700;
}
.status-dot::before {
width: 8px;
height: 8px;
content: "";
background: #22c55e;
border-radius: 50%;
}点だけでは意味が伝わらないため、必ずテキストも一緒に置きます。
7. 通知数バッジ
メニューやアイコンの横に、件数を表示する小さなバッジです。
<span class="notification-badge">3</span>.notification-badge {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
background: #ef4444;
border-radius: 9999px;
}2桁以上になっても崩れないように、min-width と左右の余白を入れます。
8. 割引バッジ
セールやキャンペーンの表示に使いやすいバッジです。
<span class="badge-sale">20% OFF</span>.badge-sale {
display: inline-block;
padding: 5px 11px;
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
background: #f97316;
border-radius: 4px;
}割引率は重要な情報なので、背景色と太字で視認性を上げます。
9. カテゴリリンクタグ
クリックできるタグは、ホバー状態を用意してリンクだと伝えます。
<a class="tag-link" href="#">WordPress</a>.tag-link {
display: inline-block;
padding: 5px 12px;
color: #1d4ed8;
font-size: 13px;
font-weight: 700;
text-decoration: none;
background: #eff6ff;
border-radius: 9999px;
transition: background-color 0.2s, color 0.2s;
}
.tag-link:hover {
color: #fff;
background: #2563eb;
}クリックできるタグは span ではなく a にします。
10. タグ一覧を横並びにする
複数のタグを並べる場合は、親要素にflexを使います。
<div class="tag-cloud">
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>WordPress</span>
</div>.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-cloud span {
padding: 4px 10px;
color: #334155;
font-size: 13px;
font-weight: 700;
background: #f1f5f9;
border-radius: 9999px;
}折り返しは CSS flexの使い方 で詳しく扱えます。
11. 角丸を小さくしたラベル
丸すぎるタグが合わないデザインでは、角丸を控えめにします。
<span class="label-square">INFO</span>.label-square {
display: inline-block;
padding: 4px 9px;
color: #334155;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
background: #e2e8f0;
border-radius: 4px;
}業務系のUIでは、丸いタグより角丸控えめの方がなじむことがあります。
12. グラデーションバッジ
キャンペーンや注目表示には、グラデーションのバッジも使えます。
<span class="badge-gradient">PICK UP</span>.badge-gradient {
display: inline-block;
padding: 5px 12px;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
background: linear-gradient(135deg, #2563eb, #14b8a6);
border-radius: 9999px;
}グラデーションは強く見えやすいので、使う場所を絞るときれいです。
13. 左線つきラベル
見出し横や補足情報に置きやすい、左線だけのラベルです。
<span class="label-left-line">POINT</span>.label-left-line {
display: inline-block;
padding-left: 10px;
color: #0f766e;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
border-left: 4px solid #0f766e;
}背景を使わないので、本文中に入れても重くなりません。
14. 吹き出し風ラベル
おすすめや補足を少し目立たせたいときのラベルです。
<span class="label-balloon">おすすめ</span>.label-balloon {
position: relative;
display: inline-block;
padding: 5px 12px;
color: #fff;
font-size: 13px;
font-weight: 700;
background: #111827;
border-radius: 6px;
}
.label-balloon::after {
position: absolute;
bottom: -5px;
left: 16px;
width: 10px;
height: 10px;
content: "";
background: #111827;
transform: rotate(45deg);
}吹き出しの三角は疑似要素で作ります。
15. カード上に重ねるバッジ
カード画像の上に「NEW」や「SALE」を重ねる場合の配置例です。
<div class="badge-card">
<span>NEW</span>
<img src="https://placehold.co/640x360" alt="">
</div>.badge-card {
position: relative;
overflow: hidden;
border-radius: 8px;
}
.badge-card img {
display: block;
width: 100%;
height: auto;
}
.badge-card span {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 9px;
color: #fff;
font-size: 12px;
font-weight: 700;
background: #dc2626;
border-radius: 4px;
}カード全体のデザインは、CSSカードデザイン集 に分けると重複を避けられます。
16. 削除ボタンつきタグ
検索条件や選択済みタグを表示するUIに使えます。
<span class="tag-removable">
CSS
<button type="button" aria-label="CSSを削除">×</button>
</span>.tag-removable {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 5px 8px 5px 12px;
color: #334155;
font-size: 13px;
font-weight: 700;
background: #f1f5f9;
border-radius: 9999px;
}
.tag-removable button {
display: grid;
place-items: center;
width: 20px;
height: 20px;
padding: 0;
color: #64748b;
cursor: pointer;
background: #fff;
border: 0;
border-radius: 50%;
}削除ボタンには、何を削除するのかがわかる aria-label を付けます。
17. 数字つきステップバッジ
手順やステップの見出し横に置きやすい数字バッジです。
<span class="step-badge">1</span>.step-badge {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1;
background: #2563eb;
border-radius: 50%;
}数字を中央に置く場合は、display: inline-grid; と place-items: center; が便利です。
18. 色違いのカテゴリタグ
カテゴリごとに色を変える場合は、共通クラスと色クラスを分けます。
<span class="category-tag is-html">HTML</span>
<span class="category-tag is-css">CSS</span>
<span class="category-tag is-js">JavaScript</span>.category-tag {
display: inline-block;
padding: 4px 10px;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
border-radius: 9999px;
}
.category-tag.is-html {
color: #9a3412;
background: #ffedd5;
}
.category-tag.is-css {
color: #1d4ed8;
background: #dbeafe;
}
.category-tag.is-js {
color: #854d0e;
background: #fef9c3;
}共通の余白や角丸は1か所にまとめると、修正しやすくなります。
19. 小さなメタ情報ラベル
記事カードの「更新日」「所要時間」などに使える控えめなラベルです。
<span class="meta-label">更新日 2026.07.08</span>.meta-label {
display: inline-block;
color: #64748b;
font-size: 12px;
line-height: 1.5;
}メタ情報は装飾しすぎず、本文やタイトルより弱く見せます。
20. CSS変数で色を変えやすいバッジ
同じバッジを複数箇所で使う場合は、CSS変数にしておくと便利です。
<span class="badge-variable">INFO</span>.badge-variable {
--badge-color: #0f766e;
--badge-bg: #ccfbf1;
display: inline-block;
padding: 4px 10px;
color: var(--badge-color);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
background: var(--badge-bg);
border-radius: 9999px;
}別の色にしたいときは、--badge-color と --badge-bg を変更します。
バッジ・ラベル・タグで失敗しやすいポイント
- 文字サイズが小さすぎて読みにくい
- 色だけで状態や意味を伝えている
- カテゴリとステータスが同じ見た目で区別しづらい
- リンクなのにホバーやカーソルがなく、クリックできると伝わらない
- 長い文章をバッジに入れて、折り返しで崩れている
使い分けの目安
- カテゴリには、丸いタグやカテゴリタグ
- 状態には、ステータスバッジや点つきラベル
- 新着や割引には、NEWバッジや割引バッジ
- フォームには、必須ラベル
- 複数のタグには、タグ一覧の横並び
まとめ
CSSのバッジ・ラベル・タグは、小さな部品だからこそ、余白、文字サイズ、角丸、色のルールをそろえるとサイト全体が整います。
一覧として並べる場合は CSSリストデザイン集、カード内に配置する場合は CSSカードデザイン集 と役割を分けると、記事同士の重複を避けやすくなります。