タグリスト表示（背景色違い）
タグリスト表示は、記事やプロフィールに付いた複数のラベルを、カテゴリごとに色を変えて横並びに見せる CSS だけの UI です。コンテナ .tl は display:flex と flex-wrap:wrap で、タグが増えても自動で折り返します。
解説
タグリスト表示は、記事やプロフィールに付いた複数のラベルを、カテゴリごとに色を変えて横並びに見せる CSS だけの UI です。コンテナ .tl は display:flex と flex-wrap:wrap で、タグが増えても自動で折り返します。各タグ .tl__t は border-radius:999px で丸いピル形になり、--blue や --pink などの修飾クラスで背景と文字色を切り替えます。背景は rgba の薄い色、文字は同系の濃い色という組み合わせで、視認性と柔らかさを両立しています。
色の足し方
新しい色を増やすときは、既存の修飾クラスを真似て .tl__t--purple のように背景と文字色のペアを追加するだけです。JS は不要で、リンクにすればクリック可能なタグにもできます。
- ブログ記事のカテゴリ・タグ表示
- プロフィールのスキルや得意分野の一覧
- 商品の特徴ラベルや在庫状況の表示
色だけで意味を区別すると色覚特性のある利用者に伝わりにくいため、テキスト自体で内容が分かるようにしておくのがアクセシビリティの基本です。フォントサイズは小さめなので、コントラストを十分に確保すると読みやすくなります。
よくある質問
タグの色のバリエーションは増やせますか。
はい。tl__t--blue などの修飾クラスにならい、背景色と文字色をペアにした新しいクラスを追加するだけで増やせます。背景は薄い rgba、文字は同系の濃色にすると統一感が出ます。
タグをクリックできるようにできますか。
できます。span をリンクの a 要素に置き換えれば、タグごとに該当カテゴリの一覧ページへ飛ばせます。見た目の CSS はそのまま流用できます。