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

生徒

「Bootstrapのフォームって便利ですが、入力欄の色や枠線を自分のサイトに合わせて変えることはできますか？」

先生

「はい、可能です。Bootstrapではフォームの配色やフォーカス時の色をSass変数で管理しているので、それを変更すれば全体を一括で調整できますよ。」

生徒

「Sass変数っていうのは具体的にどういうものなんですか？」

先生

「Sass変数はデザインの設計図のようなもので、$form-control-bg や $form-control-border-color のように、入力欄の背景色や枠線の色をまとめて設定できます。」

1. フォームを構成するSass変数の種類

BootstrapのフォームはたくさんのSass変数でデザインがコントロールされています。主なものは以下です。

これらを変更すると、すべてのフォーム部品（input、textareaなど）のデザインが一括で変わります。

2. デフォルトのフォームデザインを理解する

Bootstrap 5の標準フォームは、背景が白、文字は黒、枠線は薄いグレーで定義されています。入力欄をクリックすると、青系のフォーカスカラーがつき、外枠が強調されます。

これは$primaryのブランドカラーを基準に生成されているため、変数を変えることでフォーカス色を自由にカスタマイズできます。

例えば入力欄を落ち着いたグレーにして、文字色を濃いネイビーにしたい場合、次のように書き換えます。


$form-control-bg: #f8f9fa;
$form-control-color: #002244;
$form-control-border-color: #cccccc;

これで全体の入力欄がグレー基調で、文字が見やすいデザインに統一されます。

フォームの使いやすさを左右するのが「フォーカス時の色」です。ここを自社のブランドカラーに揃えると、サイト全体に統一感が出ます。


$form-control-focus-border-color: #ff6600;
$form-control-focus-box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25);

この例では、フォーカス時にオレンジ色の枠線と淡い影がつきます。視覚的に「ここが入力中です」と伝わりやすくなります。

枠線を少しだけ角丸にして優しい印象にすることもできます。Bootstrapではフォームの角丸を$form-control-border-radiusで調整できます。


$form-control-border-radius: .5rem;

これで入力欄が少し丸みを帯び、親しみやすい雰囲気になります。逆にフラットにしたい場合は0にすれば角丸なしの直線的なデザインになります。

フォームのSass変数は、コンパイル後のCSSに変換されるため、CDNを読み込んだだけの環境では反映されません。Sassをビルドする環境（例えばnpmやwebpackなど）が必要です。

また、変数を変更するとフォーム全体に一括で適用されるため、特定のフォームだけ違うデザインにしたい場合は別途CSSで個別指定する必要があります。

フォームはユーザーとの接点が最も多い要素です。見やすさや操作性はサイトの信頼感につながります。Sass変数を使えば、全体のデザインを統一しながら素早く変更でき、途中でブランドカラーが変わった場合も修正が容易です。

さらに、変数を中心に設計することでコードの見通しも良くなり、保守性が高まります。