Bulmaのタグラベル（バッジ）Tag [CSSフレームワーク]

Bulmaには、他のCSSフレームワークでバッジと呼ばれている小さな部品のタグラベルが用意されています。

タグラベル（バッジ）は用途の広い要素です。ブロックやその他のコンポーネントに情報を添付する方法としてとてもに便利です。

今回は、タグラベルを配置する際に使用するtagクラスについて紹介します。

どこにでも挿入できる小さなタグラベルを定義するtagクラス

Bulmaに用意されているtagクラスを利用すると、様々な場所に小さなタグラベル（以下単にタグと記載）を配置することができます。

HTML

タグラベルの色

tagクラスで作成できるタグには、buttonクラスで作成するボタンと同様に、10種類の色が用意されています。

HTML

primarylinkinfosuccesswarningdangerの各テーマカラーは、ライトバージョン（明るい形式）で表示することもできます。

HTML

テーマカラーのクラスを指定したタグの色を明るくする場合は、is-lightクラスを合わせて指定します。

タグラベルのサイズ

タグには異なる3つのサイズが用意されています。
サイズには

• 普通サイズ（Normal）
• 中くらいのサイズ（Medium）
• 大きいサイズ（Large）

があります。

HTML

タグのサイズの指定を省略した場合は、通常のサイズ（is-normalを指定した時と同じサイズ）になります。

複数のタグを配置してサイズを指定する場合、それぞれのタグに個別にサイズを指定せずに一括で指定することもできます。

HTML

複数のタグのサイズをまとめて指定する際は、tagクラスを指定した要素の親の要素にtagsクラスを指定し、合わせてサイズを表すクラス（中くらいのサイズであれば、are-medium、大きいサイズであれば、are-large）を指定します。

複数のタグのサイズをセットで指定した場合に、一部のタグのサイズだけ変更したい場合は、サイズを変更するタグにサイズを表すクラスを指定します。

HTML

丸みを帯びたタグ

タグを丸くしたい場合は、is-roundedクラスを合わせて指定します。

HTML

削除ボタンのタグ

タグを削除ボタンに変えることもできます。
削除ボタンにする場合には、is-deleteクラスを合わせて指定します。

HTML

削除ボタンにする場合には、タグのテキストは指定できません。（テキストを指定すると「×」と重なって描画されます。）

HTML

削除ボタン（deleteクラス）と組み合わせる

上記の例では、タグを削除ボタンにしましたが、タグにテキストを設定して上で削除ボタンを表示することもできます。
タグに削除ボタンを付ける場合は、deleteクラスを指定した要素を配置します。

HTML

タグのリスト

Bulmaのタグでは、tagsクラスを指定したコンテナ要素を使用してタグのリストを作成することができます。

HTML

tagsクラスを使用して作成したタグリストは、タグの数が多い場合、すべてのタグを等間隔に保ちながら、自動的に複数の行に折り返されます。

HTML

タグのリストを利用すれば、タグクラウドのデザインとして使うことも可能です。

tagクラスの使用例

ここでは、tagクラスを使用した一例を示します。

作成するのは以下のようなタグのリストになります。

HTML

上記の例では、中くらいのサイズのタグのリストを作成しています。
リスト内のそれぞれのタグには独自のカラーを指定し、削除ボタンを付けています。

Bulma 入門 Tips 一覧