BootstrapのSass変数を完全ガイド！初心者でもわかる色・余白・フォント設定

1. BootstrapのSass変数とは？

1. BootstrapのSass変数とは？

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

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

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

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. 余白（マージン・パディング）の変数

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

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

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

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

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

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

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

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変数を使うメリット

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

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

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

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

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

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

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

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

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

まとめ

まとめ

この記事では、BootstrapのSass変数を使って色・余白・フォントをカスタマイズする方法について、初心者の方にも分かるように段階的に解説してきました。Bootstrapはそのままでも完成度の高いCSSフレームワークですが、Sass変数を理解して使えるようになると、「自分のサイトらしさ」を表現できる自由度が一気に高まります。特に、Web制作やWebデザイン、フロントエンド開発を学び始めたばかりの方にとって、Sass変数は「難しそうだけど実は便利」な重要ポイントです。

まず大切なのは、Sass変数が「値を入れておく箱」であるという考え方です。Bootstrapでは、色・余白・フォントといったデザインの基本要素が、あらかじめ変数として用意されています。この仕組みのおかげで、ボタンや見出し、テキスト、カードなどを個別に調整しなくても、変数を一か所変更するだけでデザイン全体をまとめて変更できます。これは、CSSを直接書き換える方法と比べて、圧倒的に管理しやすく、修正ミスも起こりにくい方法です。

色に関するSass変数では、$primary や $danger、$success といったBootstrapの基本カラーを理解することが重要でした。これらの変数を使うことで、サイト全体の配色に統一感を持たせることができます。ブランドカラーやサービスカラーを意識したWebサイト制作では、この「色の一元管理」がとても大きな武器になります。後から「やっぱり色を変えたい」となっても、Sass変数なら修正作業が最小限で済みます。

余白に関する変数も、初心者がぜひ覚えておきたいポイントです。$spacer や $spacers を意識することで、マージンやパディングがバラバラにならず、読みやすく整ったレイアウトを作れます。余白は目立ちにくい要素ですが、Webページの見やすさや使いやすさを大きく左右します。BootstrapのSass変数を使えば、デザイン全体のリズムを保ちながら、自然なレイアウトを実現できます。

フォントに関するSass変数も、サイトの印象を決める重要な要素です。$font-family-base や $font-size-base、$line-height-base を調整することで、読みやすさや雰囲気を大きく変えられます。特にスマートフォンやタブレットなど、さまざまな画面サイズで閲覧される現代のWebサイトでは、フォントサイズや行間の調整がユーザー体験に直結します。Bootstrapの変数を活用することで、こうした調整も効率よく行えます。

Sass変数を使ったBootstrapカスタマイズの最大のメリットは、「後からの変更に強い」設計になることです。Webサイトは一度作って終わりではなく、運用しながら改善や修正を重ねていくものです。そのたびにCSSを大量に書き換えるのは大変ですが、Sass変数を使っていれば、将来的な変更にも柔軟に対応できます。初心者のうちからこの考え方に慣れておくことで、実務やチーム開発でも役立つスキルが身につきます。

Sass変数カスタマイズの確認用サンプル

最後に、BootstrapのSass変数を使って色・フォント・余白を調整した結果を確認するための、シンプルなサンプルを紹介します。自分の環境で表示を確認しながら、変数の影響範囲を理解するのに役立ちます。

<style>
.sample-box {
    background-color: var(--bs-light);
    padding: 2rem;
    border: 2px solid var(--bs-primary);
}

.sample-title {
    color: var(--bs-primary);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}
</style>

<div class="sample-box">
    <div class="sample-title">Sass変数カスタマイズ確認</div>
    <p>
        Bootstrapの色・余白・フォント変数を使って
        デザインを調整したサンプル表示です。
    </p>
</div>

このように、Sass変数を使うだけで、特別なCSSテクニックを使わなくても統一感のあるデザインを簡単に作ることができます。まずは色や文字サイズなど、分かりやすい部分から試してみるのがおすすめです。