Bootstrap ボタン色 変更：自由自在にボタンカラーを変更する方法を徹底解説！
Bootstrapを使ってWebサイトを作っているけど、ボタンの色をもっと自由にカスタマイズしたいと思っていませんか？
デフォルトのボタンカラーだけでは物足りない、ブランドイメージに合わせた色を使いたい、そんな悩みを解決します！
引言：ボタンの力、Bootstrap の魅力
ボタンはウェブページにおける重要なインタラクティブ要素であり、ユーザーがウェブサイトとやり取りするための主要な手段です。ボタンを効果的にデザインすることは、ユーザー体験を向上させ、操作の明確さや直感性を高めます。
Bootstrap フレームワークは、その強力なボタンスタイリング機能で知られており、開発者は簡単に美しく機能的なボタンを作成できます。本記事では、Bootstrap の標準的なボタン使用方法から、自分だけのスタイルを作るためのカスタマイズ方法まで、詳しく解説します。
Bootstrap ボタン基礎：使用方法と標準スタイル
Bootstrap では、<button> または <a> タグに btn クラスを適用するだけで、簡単にスタイリッシュなボタンを作成できます。
<button class="btn btn-primary">プライマリーボタン</button>
<a href="#" class="btn btn-secondary">セカンダリーボタン</a>
以下は、Bootstrap のプリセットカラーです：
btn-primary：主な操作を表すプライマリボタン（青）btn-secondary：セカンダリ操作用ボタン（灰色）btn-success：成功したアクションを示す（緑）btn-danger：危険または破壊的なアクションを示す（赤）btn-warning：警告を示す（黄色）btn-info：情報を提供する（青緑）btn-light：ライトテーマのボタン（白）btn-dark：ダークテーマのボタン（黒）
ボタンカラーカスタマイズ：プリセットとカスタムの柔軟な利用
Bootstrap のプリセットカラークラスを使用して、簡単に色を変更できます。以下のコードは赤いボタンを作成します。
<button class="btn btn-danger">警告ボタン</button>また、カスタム CSS を使用して独自のボタンカラーを作成できます。
<style>
.btn-custom {
background-color: #ff5733;
color: white;
}
</style>
<button class="btn btn-custom">カスタムボタン</button>
ボタンサイズカスタマイズ：シーンに応じたサイズ変更
Bootstrap では、ボタンサイズを調整するためのクラスが用意されています。
btn-lg：大きなボタンbtn-sm：小さなボタンbtn-block：幅100%のボタン
<button class="btn btn-primary btn-lg">大きなボタン</button>
<button class="btn btn-secondary btn-sm">小さなボタン</button>
<button class="btn btn-success btn-block">ブロックボタン</button>
また、カスタム CSS を使って、ボタンサイズや内側の余白を調整することもできます。
<style>
.btn-custom-size {
width: 200px;
height: 60px;
padding: 15px;
}
</style>
<button class="btn btn-primary btn-custom-size">カスタムサイズのボタン</button>
ボタン状態カスタマイズ：インタラクションフィードバックを向上
ボタンには、さまざまな状態が存在します。代表的な状態として、enabled、disabled、hover、active があります。無効状態のボタンを作成するには、disabled 属性を使用します。
<button class="btn btn-primary" disabled>無効なボタン</button>また、active クラスを使用して、アクティブなボタンを示すことができます。
<button class="btn btn-primary active">アクティブボタン</button>ホバーカスタムスタイルを作成するには、CSS の :hover 疑似クラスを使用します。
<style>
.btn-hover-custom:hover {
background-color: #28a745;
color: white;
}
</style>
<button class="btn btn-secondary btn-hover-custom">ホバーカスタムボタン</button>
ボタン形状カスタマイズ：ユニークなスタイルを作成
Bootstrap は、丸みを帯びたボタンを作るための rounded クラスを提供しています。また、独自の円形ボタンを CSS で作成することも可能です。
<button class="btn btn-primary rounded">丸みボタン</button>
<style>
.btn-circle {
width: 50px;
height: 50px;
border-radius: 50%;
padding: 10px;
text-align: center;
}
</style>
<button class="btn btn-danger btn-circle">●</button>
実戦演習：自分だけのカスタムボタンを作成
最後に、赤くて大きな丸みを帯びたボタンを作成し、クリック時に色が変わるカスタムボタンを作ります。
<style>
.btn-custom {
background-color: #ff0000;
color: white;
border-radius: 20px;
padding: 10px 20px;
font-size: 18px;
}
.btn-custom:active {
background-color: #00ff00;
color: black;
}
</style>
<button class="btn btn-custom">クリックで色変化</button>
この記事では、Bootstrapでボタンの色を変更する様々な方法を、初心者の方にも分かりやすく解説します。コード例も豊富にご紹介しますので、実際に手を動かしながらマスターしましょう。
カスタムCSSで思い通りの色を実現
標準クラスでは物足りない場合は、カスタムCSSを使って自由に色を指定できます。
- 直接指定: ボタン要素に直接
style属性で色を指定 - クラス定義: 独自のクラスを作成し、
background-color,colorプロパティなどで色を指定
例：
<button class="btn" style="background-color: #007bff; color: white;">カスタムボタン</button>
.my-custom-button {
background-color: #ffc107;
color: black;
}
SCSS/Sassで効率的なカスタマイズ
Bootstrapのソースコードを編集できる場合は、SCSS/Sassを使って変数を変更することで、サイト全体のボタンカラーを一括で変更できます。
- テーマカラー:
$primary,$secondaryなどの変数を変更 - ボタンカラー:
$btn-*(カラースタイル名) 変数を変更
例：
$primary: #007bff; // プライマリカラーを変更
$btn-success: #28a745; // 成功ボタンの色を変更
JavaScriptで動的に変更
JavaScriptを使えば、ボタンのクリックなどのイベントに応じて動的に色を変更できます。
styleプロパティの操作: JavaScriptでstyleプロパティに直接値を設定- クラスの追加/削除:
classListを使用してクラスを追加/削除
例：
const button = document.querySelector('.my-button');
button.addEventListener('click', () => {
button.style.backgroundColor = '#dc3545'; // クリックすると赤色に変更
});
まとめ
この記事では、Bootstrapのボタンカラーを変更する方法を4つの方法に分けて解説しました。
- 標準クラス
- カスタムCSS
- SCSS/Sass
- JavaScript
これらの方法を組み合わせることで、Webサイトのデザインに合わせた自由なボタンカラーを実現できます。
ぜひこの記事を参考に、Bootstrapのボタンをマスターして、より魅力的なWebサイトを作成してください！
Bootstrapボタンカラー変更に関するQ&A
| 質問 | 回答 |
|---|---|
| Q. 複数のボタンに同じスタイルを適用したい場合はどうすれば良いですか？ | A. 共通のクラスを作成し、そのクラスにスタイルを定義します。 そのクラスを適用したいボタンに設定してください。 |
| Q. ボタンの色を変更しても、ホバー時の色が変わらない場合はどうすれば良いですか？ | A. ホバー時のスタイルは、:hover疑似クラスを使って定義します。 .btn-primary:hover { background-color: #0062cc; } のように、ボタンのクラスに:hoverを付けてスタイルを定義してください。 |
| Q. SCSS/Sassで変数を変更するにはどうすれば良いですか？ | A. Bootstrapのソースコードをダウンロードし、_variables.scssファイル内の該当する変数を変更します。 変更後、コンパイルしてCSSを生成する必要があります。 |
参考文献
その他の参考記事:bootstrap 右寄せ ボタン