Bootstrap - バッジデモ
バッジとは？
こんにちは、未来のウェブ開発者たち！今日は、Bootstrapのバッジの魅力に迫ります。あなたの近所の親切なコンピュータ教師として、この旅を案内します。コードを書いたことがない人でも大丈夫です。さあ、仮想のバックパックを持ち出して、一緒にこの冒険に乗り出しましょう！
Bootstrapのバッジは、ウェブページに追加できるデジタルステッカーのようです。小さな、しばしば円形または錠剤型の要素で、追加情報を強調表示するために使用されます。携帯アプリの小さな通知バブルのようなウェブ版を思い浮かべてください – 目を引くし、情報提供もします！
実世界の類似物
スカウトのユニフォームを着ているとします。袖のバッジはあなたの功績を表していますよね？Bootstrapのバッジもデジタル世界で同様に機能します。未読メッセージの数や、ステータス（新規、セールなど）を表示したり、ウェブページに視覚的な興味を加えたりします。
Bootstrap バッジの始め方
コードに飛び込む前に、Bootstrapを設定する確認をしましょう。心配しないでください。キャンプでのテント張りよりも簡単です！
Bootstrapの設定
Bootstrapを使用するためには、HTMLにそのCSSおよびJavaScriptファイルを含める必要があります。以下の手順に従ってください：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Badges Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- あなたのコンテンツはここに -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>これで、バッジパフォーマンスの舞台を設えました。BootstrapのCSSおよびJavaScriptファイルにリンクし、バッジを含むすべてのBootstrapの機能にアクセスできるようになります。
バッジの基本的使用法
準備が整ったので、まず初めてのバッジを作成しましょう！
シンプルなバッジの例
<h1>Welcome to my blog <span class="badge bg-secondary">New</span></h1>この例では、見出しの横にバッジを追加しています。span要素にbadgeおよびbg-secondaryクラスを追加することで、シンプルなグレイのバッジが作成されます。
説明
-
<span>: テキストの一部をマークアップするためのインラインコンテナです。 -
class="badge": このBootstrapクラスで、spanをバッジに変換します。 -
bg-secondary: バッジにグレイの背景色を追加します。
バッジの色
Bootstrapはバッジに虹色の色を提供しています。一緒に見てみましょう！
<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-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>これらのバッジはそれぞれ異なる色で、異なる意味を伝えたり、ページをよりカラフルにしたりするのに最適です！
色の意味一覧
| 色合い | 典型的な用途 |
|---|---|
| Primary | 主要なアクションや情報 |
| Secondary | より重要でない情報 |
| Success | 正のアクションやメッセージ |
| Danger | 警告やエラーメッセージ |
| Warning | 注意情報 |
| Info | 中立的な情報メッセージ |
| Light | 微妙な背景色や強調度の低いもの |
| Dark | 高対照度や重要な情報 |
錠剤型バッジ
バッジを少し丸みを帯びた形にしたい場合は、錠剤型バッジが登場します！
<span class="badge rounded-pill bg-primary">Pill Badge</span>rounded-pillクラスを追加することで、通常のバッジを錠剤型に変換します。まるでバッジにメイクを施したようなものです！
ボタン内のバッジ
バッジをボタン内で使用して、とてもクールな効果を作成することもできます。試してみましょう：
<button type="button" class="btn btn-primary">
Messages <span class="badge bg-secondary">4</span>
</button>これで、「Messages」と書かれたボタンに小さなバッジが表示され、 unread message counts などの情報を示すのに最適です！
配置されたバッジ
時々、バッジを他の要素に関連付けて配置したいときがあります。Bootstrapは配置されたバッジを簡単に作成できます：
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>これは、ボタンの右上隅に配置され、ボタンと若干重なるバッジを作成します。まるでボタンのアイスクリームの上にトッピングを乗せたようなものです！
詳細な説明
-
position-relative: ボタンをバッジの配置コンテキストにします。 -
position-absolute: バッジをボタン内で絶対配置します。 -
top-0 start-100: バッジを右上隅に配置します。 -
translate-middle: バッジを視覚的に中央に合わせます。 -
visually-hidden: 視覚的に表示されないが、スクリーンリーダーには提供されるテキスト。
結論
それでは、皆さん！Bootstrapのバッジの世界を旅しました。シンプルな色付きバッジから錠剤型バッジ、ボタン内のバッジまで、さまざまなバッジを体験しました。バッジはウェブデザインの調味料のようなものです。智能に使用して、ページにちょうど良い味を加えましょう！
練習は完璧を生みます。さまざまな組み合わせを試してみてください。あなたの創造的なバッジの使用が次のウェブデザインのトレンドを作るかもしれません！
ハッピーコーディング、あなたのバッジはいつも明るく、ツールチップはいつも情報提供が豊富でありますように！
Credits: Image by storyset