【Bootstrapのコンポーネント】バッジ(Badges)に関して

この記事では、Bootstrapのバッジコンポーネント(Badges)について解説していきます。

バッジはフォームやタグ一覧によく使用される

バッジとは、見出しの横などにある、サブ見出しのようなものです。
よくあるのが、”New”や”必須”の文字などです。

「フォーム」や「ブログのタグ一覧」などに使用されることも多いです。

↓こういったやつですね。

いろいろな大きさのバッジ

Bootstrapのバッジは文字は小さいのですが、背景色があるので、少し目立つ仕様になっています。
どういったものなのか見ていきましょう。

バッジコンポーネント(Badges)の種類

Bootstrapのバッジコンポーネントには、4種類のものがあります。

①hタグ(見出し)内のバッジ

②spanタグのバッジ

③ピル型(カプセルタイプ)のバッジ

④aタグのバッジ

これらをソースコードと、実機画面で確認していきます。

バッジコンポーネント(Badges)の書き方

①hタグ(見出し)内のバッジ

まずは、hタグの見出し内にあるバッジからです。
hタグにspanタグを用いてバッジクラスを記述します。
hタグ内のバッジ

  1.   <h1>見出し1<span class=”badge badge-primary“>New</span></h1>
  2.     <h2>見出し2<span class=”badge badge-primary”>New</span></h2>
  3.     <h3>見出し2<span class=”badge badge-primary”>New</span></h3>
  4.     <h4>見出し2<span class=”badge badge-primary”>New</span></h4>
  5.     <h5>見出し2<span class=”badge badge-primary”>New</span></h5>
  6.     <h6>見出し2<span class=”badge badge-primary”>New</span></h6>

 

hタグ内にspanタグを入れ、バッジを作る

h1〜h6タグまで、バッジのサイズも変わっていることが確認できます。

②spanタグ単体のバッジ

続いて、2つ目です。

spanタグのバッジ

  1.     <span class=”badge badge-primary“>Primary</span>
  2.     <span class=”badge badge-secodary”>Secondary</span>
  3.     <span class=”badge badge-success”>Success</span>
  4.     <span class=”badge badge-danger”>Danger</span>
  5.     <span class=”badge badge-warning”>Warning</span>
  6.     <span class=”badge badge-info”>info</span>
  7.     <span class=”badge badge-light”>Light</span>
  8.     <span class=”badge badge-dark”>Dark</span>

 

spanタグにカラバリを加える

badge-(色)を指定することで、カラーバリエーションも増えています。

③ピル型(カプセルタイプ)のバッジ

次は角丸のついたバッジです。

ピル型(カプセルタイプ)のバッジ

  1.     <span class=”badge badge-pill badge-primary”>Primary</span>
  2.     <span class=”badge badge-pill badge-secodary”>Secondary</span>
  3.     <span class=”badge badge-pill badge-success”>Success</span>
  4.     <span class=”badge badge-pill badge-danger”>Danger</span>
  5.     <span class=”badge badge-pill badge-warning”>Warning</span>
  6.     <span class=”badge badge-pill badge-info”>info</span>
  7.     <span class=”badge badge-pill badge-light”>Light</span>
  8.     <span class=”badge badge-pill badge-dark”>Dark</span>

 

badge-pillクラスを加え、カプセル型のバッジにする

badge-pillクラスを追加することで、カプセル型のバッジになっていることが確認できます。

④aタグのバッジ

最後はリンクの要素を持ったバッジです。

aタグのバッジ

  1.     <a href=”#” class=”badge badge-primary”>Primary</a>
  2.     <a href=”#” class=”badge badge-secodary”>Secondary</a>
  3.     <a href=”#” class=”badge badge-success”>Success</a>
  4.     <a href=”#” class=”badge badge-danger”>Danger</a>
  5.     <a href=”#” class=”badge badge-warning”>Warning</a>
  6.     <a href=”#” class=”badge badge-info”>info</a>
  7.     <a href=”#” class=”badge badge-light”>Light</a>
  8.     <a href=”#” class=”badge badge-dark”>Dark</a>

 

リンクタグの要素を持ったバッジ

見た目はspanタグのバッジと同じですが、マウスホバーするとリンクできる仕掛けになっています。

まとめ

Bootstrapのバッジコンポーネントについて解説しました。

バッジの種類は以下の通りです。

①hタグ(見出し)内のバッジ

②spanタグのバッジ

③ピル型(カプセルタイプ)のバッジ

④aタグのバッジ

Bootstrapのコンポーネント部類の中では比較的使いやすいものだと思います。
バッジを付けると、見た目にも洒落たデザインになるので、ぜひ使いこなしてください。

Bootstrapのバッジコンポーネントの公式ドキュメントはこちらです。