Bootstrapボタンの角丸：丸みのあるボタンを作成する3つの方法
この記事では、Bootstrapフレームワークで角丸ボタンを作成する3つの方法について詳しく説明します。デフォルトクラス、カスタムクラス、ユーティリティクラスを使用する方法について、手順とコード例を交えて解説します。この記事を通して、Bootstrapボタンを簡単にカスタマイズして、丸みを帯びた美しいボタンを作成し、ウェブサイトのデザイン性を向上させる方法を学ぶことができます。
1. デフォルトクラスを使用：簡単に角丸ボタンを実現
Bootstrapがデフォルトで提供する.btn-roundedクラスを紹介します。
コード例
<button type="button" class="btn btn-primary btn-rounded">丸いボタン</button>
メリットとデメリット
| メリット | デメリット |
|---|---|
| 簡単に使用できる | 角丸のサイズを制御できない |
2. カスタムクラス：角丸の程度を柔軟に制御
Bootstrapのグリッドシステムとborder-radiusプロパティを使用して、角丸ボタンをカスタマイズする方法を紹介します。
コード例
<style>
.btn-custom-rounded {
border-radius: 50%;
}
</style>
<button type="button" class="btn btn-primary btn-custom-rounded">丸いボタン</button>
メリットとデメリット
| メリット | デメリット |
|---|---|
| 角丸のサイズを柔軟に制御できる | 追加のCSSコードを記述する必要がある |
3. ユーティリティクラス：角丸の半径を簡単に調整
Bootstrapが提供するrounded-*ユーティリティクラスを紹介します。
コード例
<button type="button" class="btn btn-primary rounded-pill">ピル型のボタン</button>
<button type="button" class="btn btn-primary rounded-circle">円形のボタン</button>
メリットとデメリット
| メリット | デメリット |
|---|---|
| 簡単に使用でき、追加のCSSコードを記述する必要がない | 角丸のサイズの選択肢が限られている |
ボタンのバリエーション (Variants)：多彩なスタイル選択
Bootstrap は以下のプリセットされたボタン変種クラスを提供しています：
.btn-primary：主要な操作に使用.btn-secondary：二次的な操作に使用.btn-success：成功を示すボタン.btn-danger：警告やエラーメッセージを伴う操作.btn-warning：警告メッセージを伴う操作.btn-info：情報を提示するボタン.btn-light：明るい背景のボタン.btn-dark：暗い背景のボタン.btn-link：リンクスタイルのボタン
さらに、以下のテクニックを使用してボタンをカスタマイズすることができます：
- 角丸なし：
.rounded-0を使用 - 円形ボタン (単一文字に適応)：
.rounded-circle.p-0と幅・高さの設定を追加 - ピル型ボタン：
.rounded-pillを使用 - Bootstrap 3 風のボタン：
.btn-default-v3（追加のSCSSまたはCSSスタイルが必要です）
上記のプリセットされたボタン変種クラスやテクニックを組み合わせることで、多様なボタンスタイルを作成できます。また、ボタンの色にはそれぞれ意味があり、開発者はボタンの色選びに注意し、視覚障害者にも配慮したデザインを心がけることが重要です。
テキストの折り返し禁止 (Disable text wrapping)
ボタン内のテキストの折り返しを防ぐには .text-nowrap クラスを使用します。また、Sass 変数 $btn-white-space: nowrap を設定することで、ボタンテキストの折り返しをグローバルに無効にすることができます。
ボタンタグ (Button tags)
Bootstrap の .btn クラスは <button>、<a>、<input> 要素で使用できますが、それぞれの要素でのレンダリング結果に多少の違いがあります。特に <a> タグを使用してボタンを作成する場合、アクセシビリティを確保するために role="button" 属性を追加することが推奨されます。
アウトラインボタン (Outline buttons)
Bootstrap では、背景色をなくしてボーダーだけが表示される「アウトラインボタン」も提供しています。以下は主要なアウトラインボタンクラスです：
.btn-outline-primary.btn-outline-secondary.btn-outline-success.btn-outline-danger.btn-outline-warning.btn-outline-info.btn-outline-light.btn-outline-dark
さらに、次のように背景色と組み合わせることもできます：
.btn-outline-primary.bg-light
ただし、アウトラインボタンは特に淡い背景色で使用する場合、コントラスト不足による視認性の問題に注意する必要があります。
ボタンのサイズ (Sizes)
Bootstrap 5 はボタンのサイズを簡単に変更できるプリセットクラスも提供しています：
.btn-lg：大きいサイズのボタン.btn-sm：小さいサイズのボタン
さらに、CSS 変数を使用してボタンのパディングやフォントサイズをカスタマイズすることができます。以下は主な CSS 変数です：
--bs-btn-padding-y--bs-btn-padding-x--bs-btn-font-size
ボタンの無効化 (Disabled state)
ボタンを無効化するには、disabled 属性または .disabled クラスを使用します。<button> タグの場合は disabled 属性を直接使用しますが、<a> タグの場合は .disabled クラスに加え、pointer-events: none を指定する必要があります。
リンクボタンの注意事項：機能とデザインの両立
<a> タグを使用して無効化されたボタンを作成する場合、pointer-events: none を追加してクリックを防止します。また、tabindex="-1" と aria-disabled="true" 属性を設定してアクセシビリティを確保します。
ブロックレベルボタン (Block buttons)
ブロックレベルボタンを作成するには、.d-grid.gap-{size} クラスを使用します。次のような異なる表示方法があります：
- 常にブロック表示：
.d-grid.gap-{size} - モバイル端末でのみブロック表示：
.d-grid.gap-{size}.d-md-block - 半幅表示：
.col-6.mx-auto - 右寄せ表示：
.d-md-flex.justify-content-md-end
ボタンプラグイン (Button plugin)
Bootstrap では、ボタンにプラグインを使用することができ、シンプルなトグル（切り替え）ボタンを作成できます。このトグルボタンは、通常のチェックボックスと異なり、視覚的なフィードバックに対応しています。
トグルボタン (Toggle states)
data-bs-toggle="button" 属性を使用すると、ボタンをクリックするたびにオン・オフが切り替わるトグルボタンを作成できます。また、ボタンの初期状態を設定するには、.active クラスと aria-pressed="true" 属性を追加します。
メソッド (Methods)
Bootstrap ボタンの JavaScript メソッドも提供されています：
dispose：ボタンのインスタンスを破棄getInstance：指定した DOM 要素に関連するボタンのインスタンスを取得getOrCreateInstance：インスタンスが存在しない場合、新規作成して取得toggle：ボタンのトグル状態を切り替え
以下は、JavaScript を使用してボタンの状態を制御するサンプルコードです：
document.querySelector('.btn').addEventListener('click', function () {
this.classList.toggle('active');
});
CSS 変数 (Variables)
Bootstrap 5 では、以下のような CSS 変数を使用してボタンのスタイルを柔軟にカスタマイズできます：
--bs-btn-padding-x--bs-btn-padding-y--bs-btn-font-size
Sass 変数 (Sass variables)
Bootstrap の Sass 変数を使用すると、以下のようにボタンスタイルを柔軟にカスタマイズできます：
$btn-color$btn-padding-y$btn-padding-x
Sass Mixin
Bootstrap はボタンに関する Mixin も提供しており、独自のバリエーションやカスタムスタイルを簡単に作成できます：
button-variant：ボタンのバリエーションスタイルを作成button-outline-variant：アウトラインボタンを作成button-size：異なるサイズのボタンを作成
Sass ループ (Sass loops)
Bootstrap は Sass のループを使用して、様々なカラーやサイズのボタンスタイルを効率的に生成しています。
コード例：
@each $color in $theme-colors {
.btn-#{$color} {
@include button-variant($color);
}
}
まとめ
この記事では、Bootstrapの角丸ボタンを作成する3つの方法を紹介しました。 実際のニーズに合わせて、最適な方法を選択できます。 シンプルさと迅速さを追求する場合でも、柔軟な制御を求める場合でも、ニーズを満たし、ウェブサイトのボタンをより美しくする方法は必ずあります。
よくある質問
Q1. .btn-roundedクラスとrounded-pillクラスの違いは何ですか？
.btn-roundedクラスは、ボタンの角をわずかに丸くするだけです。 rounded-pillクラスは、ボタンをより楕円形またはピルのような形にします。
Q2. 独自の角丸の半径を設定できますか？
はい、できます。 カスタムCSSクラスを作成し、border-radiusプロパティを使用して独自の角丸の半径を設定できます。
Q3. これらの方法は、すべてのBootstrapボタンで動作しますか？
はい、これらの方法は、サイズやスタイルに関係なく、すべてのBootstrapボタンで動作します。
その他の参考記事: