タグ・チップ Tag / Chip
カテゴリやステータスを小さなラベルで表示する。フィルタ選択やタグ付けに使用。
ライブデモ
カテゴリ
フロントエンド バックエンド デザイン インフラ
スキルタグ
React TypeScript Node.js
ステータス
● 公開中 ● レビュー中 ● 非公開
ソースコード
<div class="demo-chips">
<div class="demo-chips-section">
<div class="demo-chips-label">カテゴリ</div>
<div class="demo-chips-row">
<span class="demo-chip active">フロントエンド</span>
<span class="demo-chip">バックエンド</span>
<span class="demo-chip">デザイン</span>
<span class="demo-chip">インフラ</span>
</div>
</div>
<div class="demo-chips-section">
<div class="demo-chips-label">スキルタグ</div>
<div class="demo-chips-row">
<span class="demo-chip removable">React <button class="demo-chip-remove" aria-label="削除">×</button></span>
<span class="demo-chip removable">TypeScript <button class="demo-chip-remove" aria-label="削除">×</button></span>
<span class="demo-chip removable">Node.js <button class="demo-chip-remove" aria-label="削除">×</button></span>
</div>
</div>
<div class="demo-chips-section">
<div class="demo-chips-label">ステータス</div>
<div class="demo-chips-row">
<span class="demo-chip status-success">● 公開中</span>
<span class="demo-chip status-warning">● レビュー中</span>
<span class="demo-chip status-error">● 非公開</span>
</div>
</div>
</div>.demo-chips { display: flex; flex-direction: column; gap: 16px; }
.demo-chips-section {}
.demo-chips-label {
font-size: 12px; font-weight: 600; color: #888; margin-bottom: 8px;
}
.demo-chips-row {
display: flex; flex-wrap: wrap; gap: 8px;
}
.demo-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 14px; font-size: 13px; font-weight: 500;
border-radius: 20px; background: #f3f4f6; color: #555;
cursor: pointer; transition: all 0.2s;
border: 1px solid transparent;
}
.demo-chip:hover {
background: color-mix(in srgb, var(--ui-primary) 8%, #f3f4f6);
color: var(--ui-primary);
}
.demo-chip.active {
background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
color: var(--ui-primary); font-weight: 600;
border-color: color-mix(in srgb, var(--ui-primary) 30%, transparent);
}
.demo-chip.removable {
padding-right: 6px;
}
.demo-chip-remove {
background: none; border: none; cursor: pointer;
font-size: 16px; line-height: 1; color: #aaa;
padding: 0 4px; border-radius: 50%;
transition: color 0.2s, background 0.2s;
}
.demo-chip-remove:hover {
color: #ef4444; background: rgba(239,68,68,0.1);
}
.demo-chip.status-success {
background: #ecfdf5; color: #059669; cursor: default;
}
.demo-chip.status-warning {
background: #fffbeb; color: #d97706; cursor: default;
}
.demo-chip.status-error {
background: #fef2f2; color: #dc2626; cursor: default;
}document.querySelectorAll('.demo-chips-row').forEach(row => {
row.querySelectorAll('.demo-chip:not(.removable):not([class*=status])').forEach(chip => {
chip.addEventListener('click', function() {
this.classList.toggle('active');
});
});
});
document.querySelectorAll('.demo-chip-remove').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const chip = this.closest('.demo-chip');
chip.style.transform = 'scale(0.8)';
chip.style.opacity = '0';
setTimeout(() => chip.remove(), 200);
});
});AIプロンプト
Basic
タグ・チップをHTML/CSSで作ってください。カテゴリのフィルタリングやスキルタグの表示に使います。
Custom
以下の仕様でタグ・チップを実装してください。 - 選択式チップ（クリックで選択/解除のトグル） - 削除可能なチップ（×ボタン付き、削除アニメーション） - ステータスチップ（色付きドット付き） - プライマリカラー: #2563eb - サイズバリエーション（small / medium / large） - アイコン付きチップ対応
Advanced
高機能なタグ・チップコンポーネントを実装してください。 - オートコンプリート付きの入力フィールドでタグ追加 - ドラッグ&ドロップで並べ替え - 最大表示数を超えたら「+N」で折りたたみ - キーボード操作（Tab移動、Backspaceで最後のタグ削除） - aria-label, role="option" などアクセシビリティ対応 - バリデーション（重複チェック、最大数制限） - タグの色をカスタマイズ可能