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

生徒

「Bootstrapって見た目を変えたりカスタマイズできるって聞いたんですが、それってどうやるんですか？」

先生

「BootstrapにはSassという仕組みがあって、それを使うと自分好みにデザインを変えることができるんですよ。」

生徒

「Sassって何ですか？どうやって使えばいいんですか？」

先生

「それでは今回は、Sassのソースコードの取得方法と、それを使ってビルド環境を作る基本を、初心者向けに説明していきましょう！」

1. Sassとは？CSSと何が違うの？

Sass（サス）とは、CSS（シー・エス・エス）をもっと便利にしたものです。CSSは、ホームページの色や文字の大きさなどを決めるためのルールを書きますが、Sassを使うと繰り返しを減らせたり、色を変えるルールをまとめて変更したりできます。

CSSが「お弁当箱の中に1つずつおかずを詰める」作業だとすれば、Sassは「おかずのレシピを作って、あとから材料だけ変えられる」ような便利な仕組みです。

2. Sassソースを手に入れるには？Bootstrap公式の入手方法

BootstrapのSassファイルは、公式サイトやGitHub（ギットハブ）から無料でダウンロードできます。GitHubとは、プログラムのレシピをたくさん集めて公開しているサイトのようなものです。

まずは、以下のリンクにアクセスしてみましょう：

https://github.com/twbs/bootstrap

ページの右上にある「Code」という緑のボタンをクリックして、「Download ZIP」を選ぶと、パソコンにBootstrapのファイル一式がダウンロードできます。

3. ダウンロードしたSassファイルの場所を確認しよう

ダウンロードしたZIPファイルを解凍すると、「scss」という名前のフォルダがあります。ここがSassファイルが入っている場所です。

たとえば以下のようなファイルが入っています：

_variables.scss（色やサイズの変数が書かれている）
bootstrap.scss（全体をまとめて読み込むファイル）

このファイルを使って、自分だけのオリジナルBootstrapデザインを作っていくことができます。

4. ビルドってなに？SassをCSSに変える作業とは

Sassは、そのままではブラウザで読み込むことができません。Sassのファイルを普通のCSSに「変換（ビルド）」する必要があります。これがビルドです。

料理で例えると、Sassは「材料とレシピ」、ビルドは「それを使って料理を作る」作業です。完成した料理がCSSというわけです。

5. ビルド環境を作るには？初心者向けに必要なツール

SassをCSSに変換するには、専用の道具（ソフトウェア）が必要です。初心者向けにおすすめなのは「Prepros（プリプロス）」というツールです。画面操作だけでビルドができ、インストールも簡単です。

公式サイト：https://prepros.io

以下の手順で進めてください：

上記サイトにアクセスし、インストール（無料）
アプリを起動して、ダウンロードしたBootstrapのフォルダをドラッグ＆ドロップ
scss/bootstrap.scssを選んで「コンパイル（変換）」ボタンを押す
すると、同じ場所にbootstrap.cssが自動で作られます！

6. ビルドしたCSSをHTMLに読み込む方法

ビルドされたbootstrap.cssは、いつものCSSと同じように読み込むことができます。たとえば以下のようにHTMLで使います。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>カスタムBootstrap</title>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-danger">カスタムビルドされたBootstrap！</h1>
    </div>
</body>
</html>

ブラウザ表示