ボタン - Bootstrap v5.3
Bootstrap のカスタムボタンクラスを使用して、Web ページのスタイルと機能を設定します。
サンプル
Bootstrap は、HTML の <button> や <a> 要素に適用できる、事前定義されたスタイルのボタンを多数提供しています。以下は、様々な種類のボタンの例です。
<button type="button" class="btn btn-primary">プライマリ</button>
<button type="button" class="btn btn-secondary">セカンダリ</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-danger">危険</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-info">情報</button>
<button type="button" class="btn btn-light">明るい</button>
<button type="button" class="btn btn-dark">暗い</button>
<button type="button" class="btn btn-link">リンク</button>上記のコードは、以下のように表示されます。
ボタンタグ
ボタンは <button> と <a> の両方のタグで作成できますが、特にフォーム送信に関連する場合は、<button> タグを使用することが重要です。
ボタンサイズ
ボタンのサイズを変更するには、次のクラスを使用します。
| クラス | 説明 |
|---|---|
.btn-lg |
大きなボタンを作成します。 |
.btn-sm |
小さなボタンを作成します。 |
ボタンの状態
ボタンのさまざまな状態を表すために、Bootstrap はいくつかのクラスと疑似クラスを提供しています。
アクティブ
ボタンが現在アクティブであることを示すには、.active クラスを使用します。
フォーカス
ボタンにフォーカスが当たっていることを示すには、:focus 疑似クラスを使用します。
無効
ボタンを無効にするには、.disabled クラスまたは disabled 属性を使用します。無効なボタンは、マウスイベントやキーボードイベントに応答しません。
<button type="button" class="btn btn-primary" disabled>無効なボタン</button>無効状態のスタイル
無効状態のボタンのスタイルを設定するには、.btn:disabled セレクタを使用します。
トグル状態
data-bs-toggle="button" 属性を使用すると、チェックボックスやラジオボタンのように動作するトグルボタンを作成できます。aria-pressed="true" 属性を追加して、ボタンの現在の状態を支援技術に伝えます。
<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">
トグルボタン
</button>ボタンプラグイン
JavaScript を使用すると、ボタンに機能を追加するプラグインを作成できます。たとえば、ローディング状態を表示したり、クリックイベントを処理したりできます。Bootstrap のドキュメントには、ボタンプラグインの作成に関する詳細情報が記載されています。
チェック
アクセシビリティの基準を満たすために、ボタンは十分な色のコントラストを持つ必要があります。Bootstrap のデフォルトのボタンスタイルは、これらの基準を満たすように設計されています。ただし、カスタムスタイルを使用する場合は、色のコントラストをチェックすることが重要です。色のコントラストをチェックするためのツールは多数あります。たとえば、WebAIM の色のコントラストチェッカーがあります。
よくある質問
Q1: ボタンの色をカスタマイズするにはどうすればよいですか？
A1: Bootstrap のユーティリティクラスを使用して、ボタンの背景色とテキストの色を変更できます。たとえば、赤い背景と白いテキストのボタンを作成するには、btn-danger クラスと text-white クラスを使用します。
Q2: ボタンにアイコンを追加するにはどうすればよいですか？
A2: Font Awesome などのアイコンフォントを使用できます。アイコンフォントのクラスをボタンのテキストに追加するだけです。たとえば、Font Awesome の「ホーム」アイコンを追加するには、<i class="fas fa-home"></i> をボタンのテキストに追加します。
Q3: ボタンを無効にするにはどうすればよいですか？
A3: disabled 属性をボタンに追加します。たとえば、<button type="button" class="btn btn-primary" disabled>無効なボタン</button> のようにします。