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

生徒

「Bootstrapってカスタマイズできるんですか？色とか余白とか変えたいです。」

先生

「もちろんできますよ。BootstrapではSass（サス）という仕組みを使って、変数を指定するだけで色やフォントを簡単に変えられるんです。」

生徒

「変数ってなんですか？難しそうです…。」

先生

「変数とは“値を入れておく箱”のようなものです。例えば『青色』という色を箱に入れておけば、いろいろな場所で同じ青色を使えるんです。BootstrapのSass変数を使えば、背景色・文字色・余白・フォントサイズまでまとめて管理できます。」

生徒

「なるほど！変数を使えば自分好みにデザインできそうですね！」

1. BootstrapのSass変数とは？

BootstrapのSass変数は、デザインを簡単にカスタマイズできる仕組みです。色や余白、フォントなどを一括で管理できるので、初心者でもプロっぽいデザインが作れます。たとえば「メインカラーを赤にしたい」と思ったら、Sass変数で色を指定すれば、ボタンやリンクなど全体が一気に赤系統に変わります。

ここで「Sass」とは「CSSをもっと便利にした書き方」のことです。通常のCSSよりも効率的にデザインを管理できるので、Bootstrapでは必須の知識になっています。

2. 色に関するSass変数一覧

Bootstrapでは色の管理をSass変数で行います。たとえば背景色や文字色などに使う代表的な変数は以下の通りです。

$primary : メインカラー（青が初期値）
$secondary : サブカラー（グレー系）
$success : 成功メッセージ用の緑色
$danger : エラー用の赤色
$warning : 注意を示す黄色
$info : 情報を示す水色
$light : 明るい背景色
$dark : 濃い文字色や背景色

これらを使えば、色の統一感を保ちながらデザインできます。


<style>
.btn-custom {
    background-color: var(--bs-primary);
    color: white;
}
</style>

<button class="btn btn-custom">カスタムボタン</button>

ブラウザ表示

3. 余白（マージン・パディング）の変数

余白とは「要素の外側や内側の空きスペース」のことです。Bootstrapでは余白を変数で管理しています。例えば次のような変数があります。

$spacer : 基本の余白サイズ
$spacers : 複数の余白サイズをまとめた設定

これらを使うと、デザイン全体で余白が統一されます。「バラバラな余白でごちゃごちゃする」ことを防げます。


<style>
.box {
    margin: 1rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border: 1px solid #ccc;
}
</style>

<div class="box">余白が設定されたボックス</div>

ブラウザ表示

4. フォントに関する変数

Bootstrapのフォント関連の変数を使うと、文字の見た目を簡単に変えられます。主な変数は以下です。

$font-family-base : 基本のフォント
$font-size-base : 基本の文字サイズ
$font-weight-base : 基本の太さ
$line-height-base : 行間の高さ

例えば「全体のフォントサイズを少し大きくしたい」と思ったとき、この変数を変更すれば一気に調整できます。


<style>
.text-sample {
    font-family: var(--bs-font-sans-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
}
</style>

<p class="text-sample">Bootstrapのフォント変数を使った文字です。</p>

ブラウザ表示

5. Bootstrap変数を使うメリット

初心者にとってSass変数を使うメリットは次の3つです。

統一感のあるデザインができる
全体のデザインを一括で変更できる
コードの書き直しが少なくて済む

例えば、もし「青色をブランドカラーから赤色に変えたい」となったとき、Sass変数を1か所書き換えるだけで、全体が自動的に赤に切り替わります。これなら初心者でも安心してカスタマイズできます。

6. 具体的なカスタマイズ例

最後に、実際に変数を使って色や余白、フォントを変更した例を見てみましょう。


<style>
.custom-heading {
    color: var(--bs-danger);
    font-size: 2rem;
    margin-bottom: 2rem;
}
</style>

<h2 class="custom-heading">カスタマイズした見出し</h2>

ブラウザ表示