バッジの設定(Example)
バッジは、相対的なフォントサイズと em
単位を使用して、直接の親要素のサイズと一致するように調整される。v5以降、バッジはリンクのフォーカスとホバーのスタイルを廃止。
見本
見出しの例 New
見出しの例 New
見出しの例 New
見出しの例 New
見出しの例 New
見出しの例 New
Bootstrap5.xの設定例 緑背景が変更箇所
<h*>見出しの例 <span class="badge bg-secondary">New</span></h*>
※Bootstrap4.xの設定例 赤背景が変更箇所
<h*>見出しの例 <span class="badge badge-secondary">New</span></h*>
【設定】
span.badge.bg-{themecolor}
({themecolor}
は、primary
,secondary
,success
,info
,warning
,danger
,light
,dark
のいずれかを選択).badge
単独での使用は不可(必ず.bg-{themecolor}
を追加)- バッジの中に表示する内容が存在しない場合は、バッジ自体表示されない
【変更履歴】
- 【v5.0.0-alpha1】
.badge.badge-{themecolor}
⇒.badge.bg-{themecolor}
(.badge-{themecolor}
は廃止)- リンクのフォーカスとホバーのスタイルを廃止(ボタンと区別するため)
バッジはリンクやボタンの一部としてカウンタを提供するために使用可能。
見本
設定例
<button type="button" class="btn btn-primary">
お知らせ <span class="badge bg-light text-dark">4</span>
</button>
使用方法によっては、スクリーンリーダーや同様の支援技術のユーザーにバッジが混乱する可能性があることに注意。バッジのスタイルはその目的を視覚的に示しているが、これらのユーザーには単にバッジの内容が提示されるのみ。特定の状況によっては、これらのバッジは、文章、リンク、ボタンの最後に追加されるランダムな単語や数字のように見える場合がある。
コンテンツが明確(上記の「お知らせ」の例のように"4"がお知らせの数であると理解されている場合)でない限り、視覚的に隠された追加のテキストを含む追加のコンテンツを含めることを検討すること。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<button type="button" class="btn btn-primary">
プロフィール <span class="badge bg-light text-dark">9</span>
<span class="visually-hidden">未読メッセージ</span>
</button>
※Bootstrap4.xの設定例 赤背景が変更箇所
<button type="button" class="btn btn-primary">
プロフィール <span class="badge bg-light text-dark">9</span>
<span class="sr-only">未読メッセージ</span>
</button>
【設定】
- ボタンの設定内に、
span.badge.bg-{themecolor}
を入れる
【変更履歴】
- 【v5.0.0-alpha2】
- 追加のコンテンツ:
span.sr-only
⇒span.visually-hidden
- 追加のコンテンツ:
背景色(Background colors)v5.0.0-alpha1設定変更
バッジの外観を迅速に変更するには、背景色ユーティリティクラス(.bg-{themecolor}
)を使用。Bootstrapのデフォルトの .bg-light
などを使うときは、背景色ユーティリティクラスが background-color
以外の何も設定していないため、適切なスタイルとして .text-dark
のような文字色ユーティリティクラスが必要となる。
背景色の種類
Primary .bg-primary
Secondary .bg-secondary
Success .bg-success
Info .bg-info.text-dark
Warning .bg-warning.text-dark
Danger .bg-danger
Light .bg-light.text-dark
Dark .bg-dark
Bootstrap5.xの設定例 緑背景が変更箇所
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
※Bootstrap4.xの設定例 赤背景が変更箇所
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
設定例
【注意】
- 背景色を
.bg-warning
,bg-info
,.bg-light
にする場合は、文字色の設定として.text-dark
を追加する
支援技術への意味の伝達
意味を追加するのにカラー名を使用しても視覚的な指示を提供するだけであり、スクリーンリーダーなどの支援技術のユーザーには伝わらないだろう。カラー名で表示された情報をコンテンツ自体で明らかにするか(可視テキストなど)、代替手段として追加のテキストなどを .visually-hidden
クラスで隠すなどして入れるようにすること。
ピルバッジ(Pill badges)v5.0.0-alpha1設定変更
より大きな border-radius
でバッジをより丸くするためには .rounded-pill
(長丸)ユーティリティクラスを使用。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
設定例
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
※Bootstrap4.xの設定例 赤背景が変更箇所
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
【設定】
span.badge.bg-{themecolor}
に.rounded-pill
を追加
【変更履歴】
- 【v5.0.0-alpha1】
.badge.bg-{themecolor}.badge-pill
⇒.badge.bg-{themecolor}.rounded-pill