Bootstrap

【色も変えれる】Bootstrapをsassでカスタマイズして使おう

Bootstrapの特定の部分を変えたいと思ったとき、思った通りの見た目にならないことがあります。これは元々のBootstrapのcssが干渉してしまうことが原因です。

importantを使用したCSSを追加し無理やり見た目を変更すると、どんどん強い強制力で見た目を上書きしていく必要が大きくなり、保守性も低下してしまいます。

しかしsassを使用することができるようになれば、自在に必要ないcssをカットし、テーマカラーも変更できるようになります。この記事ではsassで簡単にBootstrapをカスタマイズする方法を紹介します。

Bootstrapをsassでカスタマイズして使おう

Bootstrapといえば、簡単にきれいなウェブサイトを作成することができる有名なフレームワークです。レスポンシブなレイアウトもクラスの追加だけで実装することができます。

Bootstrapのメリット

Bootstrapのメリットをいくつか挙げます。

  • 手軽にきれいなレスポンシブデザインのウェブサイトが作れる。
  • 広く使われていて、クラス設計がしっかりしているため、ほかの人が作ったコードも読みやすい。

クラスの命名規則がしっかり決まっていることで、誰でも簡単に保守性の高いウェブサイトを作成することができます。

特にレイアウトの関連クラスは本当に優秀で、marginやpaddingなどを感覚的にクラスを指定していくことができます。

Bootstrapのデメリット

逆にBootstrapのデメリットも挙げておきます。

  • 不要なコードが多くなりやすい。
  • 色やデザインが画一的で、カスタマイズも難しい。

不要なコードが多くなりやすい

Bootstrapはウェブサイトで使われるさまざまな部品のデザインがあらかじめ備わっています。それは便利ではあるのですが、中には使用しない部品も含まれています。

不要なコードがあるということは、そのウェブサイト上でまったく読み込む必要がないコードを読み込むということになります。当然ウェブサイトの表示が遅くなることに繋がりかねません。

読み込みが遅いとユーザーの離脱にもつながるので、少しでも余計なコードがあるのは、なかなかストレスです。

色やデザインが画一的でカスタマイズも難しい

Bootstrapには色の設定があらかじめ備わっています。クラスの指定だけで文字の色や背景色を設定することができます。

しかしBootstrapは広く使われているフレームワークであるので、そのままの色では他の多くのウェブサイトと被ってしまいます。

細かくカスタマイズしようとすると、もともとのBootstrapのコードと干渉してしまいます。Bootstrapのコードの中にはimportantが指定されているものもあり、自在にカスタマイズするには工夫が必要です。

これらのデメリットはBootstrapをsassを使うことで解決できます。

Sassとは

sassとはcssを作るための言語です。Bootstrapのcssも複数のsassを読み込み、まとめてコンパイルすることで作成されています。

sassはcssではないため、sassのファイルをHTMLから読み込むことはできません。sassを使用するための手順としては以下のような形になります。

  1. sassを作成する。
  2. sassをコンパイルし、css形式に書き出す。
  3. 書き出されたcssをHTMLに読み込ませる。

sassは名前も記法もcssによく似ていますが、あくまで「cssを作成するためのもの」です。sassの記法はsassとscssの二種類があり、scssの方が一般的なようです。

今回の記事ではsassの記法については深く触れず、あくまでBootstrapをより便利に使用することにフォーカスします。

sassでBootstrapをカスタマイズするメリット

sassでBootstrapをカスタマイズするメリットは、変数・関数が使用できることです。

元々Bootstrapのcss自体がsassを利用して作られているため、sassを書き換えると新しいオリジナルのcssを作ることができます。

たとえばprimaryなどの色の指定で、一部の重要な部分を書き換えれば、文字の色、背景色、ボーダーなどの色をまとめて書き換えることができます。

sass
  • 色に関する指定をまとめて指定できる。
  • 修正漏れが発生しにくい。
css
  • 文字、背景、ボーダーなど、色に関する指定をそれぞれ書き換えなければならない。
  • 修正点が増え、修正漏れが発生しやすい。

たとえばピンク色などをprimaryのクラスに割り当てることも可能です。

色を変更すればBootstrapのルールに則ったクラス指定のまま、オリジナリティのあるサイトを簡単に作成することができるようになります。

また必要ない部品を除いたCSSを作成することも可能です。

sassでbootstrapをカスタマイズするには、Bootstrapの公式サイトからファイル本体をダウンロードしていく必要があります。

CDNは使用することができません。

Bootstrapをsassでカスタマイズする方法

ここからはBootstrapをsassでカスタマイズする方法を紹介します。bootstrapのソースコードを公式サイトからダウンロードしてきましょう。

sassのコンパイル環境を整える

sassはcssのように、そのままHTML内にリンクを作成することはできません。あらかじめsassをまとめてコンパイルすることで、ひとつのまとまったcssを作成することができます。

sassをコンパイルする方法はいくつかありますが、最も簡単だと私が思うのはpreprosというコンパイラーです。GUIで操作できるため、とても見やすく使い勝手も最高。しかも全機能を無料で使用することができます。

https://prepros.io/

公式サイトを見ると「購入する」とあるので私も有料化と思い躊躇していたのですが、広告が出るだけで、問題なく無料で使用することができます。広告が気になるという人だけ購入すればよいということですね。

preprosの使用方法

preprosは公式サイトからインストールしてきて、すぐに使用をはじめることができます。

bootstrapの場合は公式サイトからダウンロードしてきたソースコードを解凍すると、scssというフォルダが用意されています。そのフォルダを起動したpreprosにドラッグ&ドロップすることで、scssを読み込むことができます。

preprosの画面

ドラッグ&ドロップしたフォルダ内にあるファイルが一覧で見ることができます。GUIなのですっきり見やすいですね。ファイルをダブルクリックすると、メモ帳で編集することができます。

cssを作成したいsassのファイルを選択すると、右横にメニューが出てきます。

コンパイルの準備ができたpreprosの画面

右横メニューの下の方にある、ProcessFileというボタンを押すだけで、簡単にcssを作成してくれます。

bootstrapの場合であれば、bootstrap.scssをコンパイルすると、いつものbootstrapのcssを作成することができます。

sassでBootstrapが不要なcssを読み込むのを排除する

sassを使用すればbootstrapで気になる、不要なcssが読み込まれるという点を解決することができます。少しでも不要なcssの読み込みを排除して、軽量な動作を目指しましょう。

デフォルトのbootstrapの仕組み

scssフォルダ内にある、bootstrap.scssをメモ帳で開いてみましょう。

bootstrapを使用する人にとってはおなじみの機能の名前が並んでいますね。Bootstrapのsassはbootstrap.scssを起点に他のsassファイルが読み込まれています。

boostrap.scssをコンパイルすると、これらのファイルを読み込み組み合わせて、CSSファイルが作成されます。

bootstrapに不要なファイルを読み込ませない方法

読み込むファイルを制限してbootstrap.scssをコンパイルすることで、不要なファイルを読み込まないcssファイルを作成することができます。

bootstrap.scssを開き、使用しないクラスはコメントアウトしてコンパイルしましょう。

  1. bootstrap.scssをメモ帳で開く。
  2. 不要な機能の名前のついたscssのimport文をコメントアウトする。
  3. bootstrap.scssをコンパイルする。

上記の方法で不要な機能を抜いたbootstrap.cssを作成することができます。

色の定義を自由に変更する

テーマカラーは水色ではなくピンクにしたい!オレンジにしたい!明るいトーンにしたい!

Bootstrapの中でもテーマカラーを変更するだけで大きく印象が変わり、Bootstrapで作られたイメージを崩すことができます。

デフォルトのbootstrapの仕組み

scssフォルダ内にある、_variables.scssをメモ帳で開いてみましょう。

色に関する指定がまとめられています。

使用する色の定義を変更する方法

_variables.scssを$primary:など色を定義している箇所を、直接編集して書き換えるのもひとつの方法です。ですが保守性などを考え、別ファイルで作成しましょう。custom.scssを作成し、次のように書きます。

$dark:#595656;
$secondary:#b5b6b6;

@import “bootstrap.scss”;

もちろん$dark:や$secondary:は自由に書き換えることができます。bootstrap.scssを読み込み、_variables.scssを直接書き換えないことで、プロジェクトごとに管理する手間を減らすことができます。

まとめ

一見難しそうに見えるsassですが、GUIのコンパイラーであるpreprosがとっつきやすく始めやすいです。記法もBootstrapをカスタマイズするだけであれば、真剣に覚える必要もありません。私も最初はsassってよくわからないと思っていたのですが、はじめてみれば「なんだこれだけのことか」と拍子抜けするくらい簡単でした。

CSSの知識さえあれば自在にBootstrapを扱うことができるようになります。作れるウェブページの幅もぐっと広げることができるため、ぜひ一度お試しください。もう二度と普通のcssを書けなくなるくらい簡単、便利ですよ!