Bootstrapボタンを一括変更！$btn-*変数でデザインをカスタマイズする方法と注意点

ボタンの見た目を一括変更：$btn-* 変数のカスタマイズと注意点

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのボタンって便利ですが、色や形を全部自分のデザインに合わせて変えることはできますか？」

先生

「はい、できます。Bootstrapには$btn-*というSass変数があって、それを変更すれば一括で見た目をカスタマイズできますよ。」

生徒

「$btn-*って具体的にはどんなものがあるんですか？」

先生

「例えばボタンの基本色を決める$btn-color、角の丸みを調整する$btn-border-radius、文字サイズや余白を決める$btn-padding-y・$btn-padding-xなどがあります。」

1. $btn-*変数とは？

$btn-*変数とは、Bootstrapのボタンコンポーネントの見た目を統一的にコントロールするための設定項目です。通常、ボタンは.btnクラスにスタイルがまとめられていますが、その元となる値はSass変数で管理されています。

例えば次のような変数があります。

$btn-padding-y … 上下の余白
$btn-padding-x … 左右の余白
$btn-font-weight … 文字の太さ
$btn-border-radius … ボタンの角丸
$btn-color … ボタンの文字色
$btn-bg … 背景色

これらを変更すれば、サイト全体のボタンを一括でデザイン変更できます。

2. デフォルトの設定を理解する

Bootstrap 5のデフォルトでは、$btn-padding-yが0.375rem、$btn-padding-xが0.75remに設定されています。つまりボタンは上下6px、左右12px程度の余白で描かれます。

角の丸みは$btn-border-radiusが0.375rem（約6px）になっており、モダンな印象の丸みがついています。

このように、変数の値を知っておくと「なぜ今の見た目なのか」が理解しやすくなります。

3. ボタンデザインを一括変更する例

例えば、角を丸くしすぎず、フラットで大人っぽいデザインに変えたい場合は次のように設定します。


$btn-border-radius: 0;
$btn-padding-y: .5rem;
$btn-padding-x: 1rem;
$btn-font-weight: 600;

これにより、全てのボタンが角丸なし、やや太字で余裕のあるデザインに統一されます。

4. ブランドカラーを適用する

ボタンの色も変数で指定できます。例えば自社のブランドカラーをオレンジにしたい場合は、次のように書き換えます。


$btn-bg: #ff6600;
$btn-color: #fff;
$btn-border-color: #ff6600;

これで標準の.btnがすべてブランドカラーに変わります。全ページで統一感のあるデザインが作れるので便利です。

5. 注意点

$btn-*変数を編集すると、.btnに関わる全てのボタンに影響します。そのため、細かいバリエーションを残したい場合には注意が必要です。

例えば、.btn-primaryや.btn-successといった色違いのボタンも基本の$btn-*を元に作られているため、サイズや角丸が一気に変更されます。部分的に違うデザインを使いたいときは、別途CSSで上書きする方法を併用するのがよいでしょう。

また、BootstrapのCDNで読み込んだだけではSass変数は動かず、ビルド環境（Sassコンパイル）が必要になります。これは初心者がよくつまずくポイントなので覚えておくと安心です。

6. ボタンデザイン調整のメリット

ボタンはユーザーが最もよく触れる要素のひとつです。見やすく押しやすいデザインに統一すれば、ユーザー体験が大きく向上します。

$btn-*変数を使って一括でコントロールすれば、サイト全体に統一感が出て、管理もしやすくなります。デザインを途中で変えたくなっても、変数を修正するだけで全てのボタンを一度に調整できるのが大きなメリットです。

まとめ

Bootstrapのボタン設計を全体で振り返る

この記事では、Bootstrapのボタンデザインを一括で調整する方法として、$btn-*変数の考え方と使い方を学んできました。Bootstrapのボタンは見た目が整っていて、そのままでも十分に使いやすいですが、実際のWeb制作では「サイト独自の雰囲気に合わせたい」「ブランドカラーを反映したい」「少しだけ角丸を変えたい」といった調整が必要になることが多くあります。そのような場面で活躍するのが、Sassで管理されている$btn-*変数です。

個別のボタンにCSSを書いて調整することもできますが、それを続けていると管理が複雑になり、デザインの統一感も失われがちです。$btn-padding-yや$btn-border-radiusなどの変数を使えば、「ボタンの基本設計そのもの」をまとめて変更できるため、サイト全体を見渡した設計がしやすくなります。これはBootstrapを使う大きなメリットのひとつと言えるでしょう。

$btn-*変数を使うと何が変わるのか

$btn-*変数は、単に見た目を変えるための設定ではありません。余白、文字サイズ、角丸、色といった要素を整理して決めることで、「このサイトではこういうボタンを使う」という明確なルールを作ることができます。これはデザインだけでなく、開発や保守の面でも大きな意味を持ちます。

例えば、途中で「全体的にボタンを少し大きくしたい」「指で押しやすいサイズにしたい」と思った場合でも、変数を一か所変更するだけで全ページのボタンに反映できます。ページ数が増えても対応が楽になるため、長く運用するサイトほど効果を実感しやすいでしょう。

シンプルなボタン設計のサンプル


<style>
.btn {
    padding: .6rem 1.2rem;
    font-weight: 600;
    border-radius: 0.25rem;
}
</style>

<button class="btn btn-primary">送信</button>
<button class="btn btn-secondary">キャンセル</button>

ブラウザ表示

このように、ボタンの余白や角丸、文字の太さを意識するだけでも、押しやすさや見た目の印象は大きく変わります。BootstrapのSass変数でこれらを管理すれば、同じ考え方を全ボタンに反映できるため、デザインのばらつきを防げます。