CSSを使ったBootstrapのカスタマイズ方法とは？基本的な使い方についても解説

システム
エンジニア

CSSを使ったBootstrapのカスタマイズ方法が知りたいです。

プロジェクト
マネージャー

CSSのカスタイズ方法や「Color Utility Generator」を使用したカスタマイズ方法について紹介しますので、一緒に見ていきましょう。

CSSを使ったBootstrapのカスタマイズ方法とは？

今回は、CSSを使ったBootstrapのカスタマイズ方法について説明します。

Bootstrapはわざわざカスタマイズしなくても素晴らしいWebページを作ることができます。物足りない人向けに、CSSを使ったカスタマイズ方法を紹介します。

ここでは、CSSのカスタイズ方法に加え、「Color Utility Generator」を使用したカスタマイズ方法についても紹介します。

CSSを使ったBootstrapのカスタマイズ方法に興味のある方はぜひご覧ください。

Bootstrapのカスタマイズ方法

CSSを使ったBootstrapのカスタマイズ方法について説明します。普通は、以下のようにCSSを読み込みます。

Bootstrapをカスタマイズするには、BootstrapのCSSの後に自作のCSSを指定します。

後は、自作のCSSで規定の要素を上書きすればよいです。

基本的な使い方

CSSを使ったBootstrapのカスタマイズ方法について、実際のコードを紹介します。以下のように、カスタマイズなしのHTMLがあるとします。

実行すると以下のようになります。

See the Pen
bootstrap_css1 by kskumd (@kskumd)
on CodePen.

ボタンとパンくずリストについて、カスタマイズしてみます。
CSSに以下を記述します。

実行すると以下のようになります。

See the Pen
bootstrap_css2 by kskumd (@kskumd)
on CodePen.

CSSを使ってBootstrapがカスタマイズできていることが分かります。

色の変更

次は、色を変更してみます。Bootstrapでは、primaryは青色（#007bff）ですが、これを赤に変更します。

CSSに以下のように記述します。

HTMLに以下のように記述します。

実行結果は以下のようになります。

See the Pen
bootstrap_css3 by kskumd (@kskumd)
on CodePen.

ボタンの背景色だけが赤になりました。他は青のままです。すべての色を変更するには、text-primaryなどのセレクタも個別に変更する必要があります。

Color Utility Generator

先ほどの章で、すべてのセレクタをCSSで記述する必要があると述べました。それは手間なので、「Color Utility Generator」という便利なサイトがあります。

Color Nameに「primary」、色に赤を指定します。SCSSのチェックを外して「Generate」ボタンをクリックします。

すると、指定した色コードのCSSが出力されます。これをCSSに記述します。

実行結果は以下のようになります。

See the Pen
bootstrap_css4 by kskumd (@kskumd)
on CodePen.

すべての色が変更されていることが分かります。

システム
エンジニア

CSSを使ったBootstrapのカスタマイズ方法について理解できました。

プロジェクト
マネージャー

カスタマイズしたい箇所がたくさんあって手間に感じる場合は、「Color Utility Generator」を使用したカスタマイズ方法もおすすめです。

CSSを使ってBootstrapをカスタマイズしよう

いかがでしたでしょうか。CSSを使ったBootstrapのカスタマイズ方法について説明しました。

Bootstrapはわざわざカスタマイズしなくても素晴らしいWebページを作ることができます。
CSSのカスタイズ方法に加え、「Color Utility Generator」を使用したカスタマイズ方法についても紹介しました。

ぜひ自分でソースコードを書いて、理解を深めてみてください。