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

生徒

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

先生

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

生徒

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

先生

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

1. $btn-*変数とは？

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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