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

生徒

「Bootstrapをそのまま使うだけじゃなくて、自分好みに色やデザインを変えることはできますか？」

先生

「はい、できますよ。Bootstrap 5はSass（サス）という仕組みを使うと、変数を変更して自分のプロジェクトに合わせて簡単にカスタマイズできます。」

生徒

「Sassって難しそうですが、初心者でも大丈夫ですか？」

先生

「大丈夫です。npmとdart-sassを使えば、初心者でも少しずつ理解しながら設定できますよ。では、基本手順を見ていきましょう！」

1. SassとBootstrapカスタマイズの基礎知識

Sass（サス）とは、CSSをもっと便利に使うための拡張言語です。変数（色やサイズを一括管理する仕組み）を使えたり、部品を分けて管理できるのが特徴です。Bootstrap 5はこのSassをベースに作られているため、Sassを使うことで「ボタンの色」「余白のサイズ」「フォント」などを簡単にカスタマイズできます。

たとえるなら、料理のレシピを自分用に書き換えるようなものです。レシピの材料（変数）を変更すれば、同じ料理でも味付けや見た目を自由に変えられます。

2. npm環境の準備

まずはnpmというツールを準備します。npmはNode.jsに付属しているパッケージ管理ツールで、Bootstrapやdart-sassをインストールするのに使います。

パソコンにNode.jsを入れるとnpmも使えるようになります。公式サイトからインストーラーをダウンロードし、画面の指示に従って進めれば準備完了です。

初心者の方は「npmはソフトをまとめて管理するアプリ」と理解しておくと安心です。

3. プロジェクトにBootstrapとdart-sassを導入

プロジェクトのフォルダを作ったら、npmを使ってBootstrapとdart-sassを追加します。コマンドプロンプトやターミナルで以下のように入力します。


npm init -y
npm install bootstrap sass

これで、Bootstrap 5とdart-sassがプロジェクトに入りました。以降は自分のスタイルをSassファイルに書いていきます。

4. Sassファイルを作成してBootstrapを読み込む

次に、自分用のSassファイル（拡張子は.scss）を作り、Bootstrapを読み込みます。例えば、custom.scssというファイルを作成して以下のように記述します。


@import "node_modules/bootstrap/scss/bootstrap";

この状態でdart-sassを使えば、Bootstrap全体がCSSに変換されます。ここに変数を書き換えれば、自分専用のBootstrapが作れるわけです。

5. Sass変数を使って色を変更してみよう

Bootstrapにはあらかじめ色や余白などの変数が用意されています。たとえば「プライマリーカラー（基本の青色）」を変更したい場合は、Bootstrapを読み込む前に変数を上書きします。


$primary: #ff6600;
@import "node_modules/bootstrap/scss/bootstrap";

これでボタンやリンクの基本色がオレンジに変わります。難しいコードを書かなくても、変数を1行書くだけでデザインを自由に変更できます。

6. dart-sassでコンパイルする方法

作成したSassファイルは、そのままではブラウザで使えません。そこで「コンパイル」という作業をしてCSSに変換します。dart-sassはこの変換を行うツールです。

コマンドは以下のようになります。


npx sass custom.scss custom.css

これでcustom.cssが出力され、HTMLから読み込めるようになります。

7. HTMLに適用して確認する

最後に、生成されたcustom.cssをHTMLファイルで読み込みます。次のように書けばOKです。


<link href="custom.css" rel="stylesheet">

ブラウザで表示すると、ボタンの色やデザインが変わっていることを確認できます。これで「Bootstrap 5をSassでカスタマイズする基本手順」が完了です。

8. 初心者が気をつけるポイント

Sassとnpmの構成は最初は難しく感じるかもしれませんが、理解してしまえば便利な仕組みです。特に初心者の方は以下の点を意識してください。

変数の上書きは必ず@importの前に書く
コンパイル後のCSSをHTMLで読み込む
作業のたびにブラウザで確認して小さな変更から進める

この流れを守れば、安心してBootstrap 5を自分好みにカスタマイズできます。

まとめ

この記事では、Bootstrap 5をSassでカスタマイズする方法について、初心者の方でも理解できるように、npmとdart-sassを使った基本的な構成と手順を丁寧に解説してきました。Bootstrapをそのまま使うだけでも十分便利ですが、Sassを組み合わせることで、配色やデザイン、余白、フォントといった細かな部分まで自分のプロジェクトに合わせて調整できるようになります。これは、見た目の統一感を高めたり、オリジナリティのあるWebサイトを作るうえで非常に重要なポイントです。

まず理解しておきたいのは、Sassが「CSSをより扱いやすくするための仕組み」であるという点です。Sassを使うと、色やサイズを変数としてまとめて管理できるため、デザイン変更が発生した場合でも、何十か所もCSSを書き換える必要がなくなります。Bootstrap 5は内部でSassを利用して設計されているため、この仕組みと非常に相性が良く、公式でもSassを使ったカスタマイズが推奨されています。

npmとdart-sassを使った構成は、最初は少し難しく感じるかもしれません。しかし、npmは「必要な道具をまとめて管理するための仕組み」、dart-sassは「SassをCSSに変換するための変換機」と考えると、イメージしやすくなります。一度環境を整えてしまえば、あとはSassファイルを編集してコンパイルするだけで、自分専用にカスタマイズされたBootstrapを何度でも生成できるようになります。

特に重要なポイントは、Sass変数の上書きを行うタイミングです。Bootstrapを読み込む前に変数を書き換えることで、ボタンの色やリンクカラー、背景色などをまとめて変更できます。この順番を守らないと、意図したカスタマイズが反映されないため、初心者の方は「変数 → Bootstrap読み込み」という流れをしっかり覚えておくことが大切です。これはBootstrap 5をSassで扱ううえでの基本ルールとも言えます。

また、dart-sassによるコンパイル作業も欠かせません。Sassファイルはそのままではブラウザで読み込めないため、必ずCSSに変換する必要があります。この作業を習慣化することで、「Sassで書く → コンパイルする → ブラウザで確認する」という自然な開発の流れが身につきます。小さな変更を加えながら何度も確認することで、Bootstrap 5とSassの仕組みを無理なく理解できるようになります。

Bootstrap 5をSassでカスタマイズできるようになると、既存のテーマに頼らず、自分だけのデザインを作れるようになります。これは単なる見た目の変更にとどまらず、プロジェクト全体の保守性や拡張性を高めることにもつながります。初心者の方でも、今回紹介した基本手順を一つずつ試していけば、確実にステップアップできます。

Sassカスタマイズ確認用の簡単なサンプル

最後に、SassでカスタマイズしたBootstrap 5の見た目を確認するための、シンプルなサンプルを紹介します。色や余白が正しく反映されているかを確認する際に役立ちます。


<div class="container mt-4">
  <h1 class="mb-3">Sassカスタマイズ確認</h1>
  <p>
    プライマリーカラーや余白が、Sassで指定した内容に
    なっているかを確認します。
  </p>
  <button class="btn btn-primary">確認用ボタン</button>
</div>

ブラウザ表示

このような簡単な画面でも、ボタンの色や文字の余白、全体の雰囲気が変わっていることを確認できます。Sassによるカスタマイズは、こうした小さな確認を積み重ねることで、より深く理解できるようになります。

先生と生徒の振り返り会話

生徒

「Bootstrapって、そのまま使うだけじゃなくて、こんなに自由に変えられるんですね。」

先生

「そうですね。Sassを使うと、デザインをまとめて管理できるのが大きな強みです。」

生徒

「npmやdart-sassは難しそうでしたけど、流れで考えると分かりやすかったです。」

先生

「最初は戸惑いますが、慣れると作業がとても楽になりますよ。」

生徒