Bootstrap4のテーマをカスタマイズするなら、Bootstrap.Buildを使うべき

こんにちはMIYACHI(@_38ch)です。

突然ですが、みなさん、Bootstrapは使っていますか?

フロントエンド系のエンジニアの方は、初心者の頃にCSSフレームワークの入門として何度か使ったことがあるかもしれません。

あまりにもメジャーすぎるCSSフレームワークであるがゆえに、「Bootstrap臭」という言葉も生まれ、スキルが上達するに連れて使わなくなっていった人も多いんじゃないでしょうか?

2018年1月にBootstrap4がリリースされましたが、以前のようなBootstrap臭は軽減されており、加えて、スタイルを少しいじるだけで、Bootstrapで開発したとは推測ができないくらいアレンジすることができます。

この記事では、Bootstrap4のテーマを簡単にカスタマイズする方法に関してご紹介していきます。

Bootstrap4テーマを修正するには?

Bootstrapのテーマをいじるには何個か選択肢があるのですが、王道としてはSassをいじることでしょう。

CSSを上書きすることでも簡単に対処できますが、例えば、primary色を変更したいときに、網羅的にまとめて変更するのは大変です。

SCSSを修正して、対応するやり方はこのような記事にも書いていますが、SCSS初心者の方には少し学習コストがかかるような気もします。なぜなら、SCSSはCSSをよりプログラマティックに作成する手法で、webpackなども知識も必要になってくるからです。

※ SassとSASSとSCSSが混乱している人はこちらをご参照あれ。

SassとSASSとSCSSの違いについて –https://uxmilk.jp/38084

Bootstrap.Buildだったら超簡単にカスタマイズできそう

そこで僕が発見したのが、Bootstrap.Buildという、Webサイト上でぽちぽちBootstrapテーマをカスタマイズでき、そのCSSやSCSSをエクスポートできるというサービスです。

以下が僕が感じたBootstrap.Buildのオススメな点。

1. テーマをカスタマイズした際に、リアルタイムでイメージを確認できる

Bootstrap.Buildのカスタマイズ画面はこんな感じになっており、右サイドバーで値を変更すると、左側のBootstrapコンポーネントに逐一反映され、結果をすぐに確認できるようになっています。

2. すでにいくつかのテーマが用意されており、無料でダウンロードできる

決して多くはないですが、”Free Themes” というページに何個かのすでにカスタマイズされたテーマが公開されており、それをダウンロードして自分のアプリに適用するだけでも十分Bootstrap臭を抑えることができます。

またその公開されているテーマをベースに自分好みにカスタマイズすることができ流ようです。

3. SCSSで使われている変数がなんとなく把握できる

カスタマイズ画面で修正するのは、SCSSで定義されている変数の値です。なので、手始めに、Bootstrap.BuilderでSCSSのイメージを掴んで、あとから、SCSS自体やwebpackによるcompileの方法を学ぶというステップでも良いかもしれません。

<辛い点> 課金しないとバージョン管理ができない

一度カスタマイズしたテーマは、たとえアカウント登録をしていたとしても、課金しない限り、保存することができません。

ただ、custom.scssや_variables.scssといった、ベース色やフォントサイズなど、カスタマイズされた箇所のみをscss拡張子でエクスポートできるので、それをGit管理することで対処できるかと思います。

実際、有料プランも月額4.9ドルなので、そこまで高くないけど、ベーステーマは最初に一気に作ってしまって、あとで変更したくなったら、主導でCSSなり、SCSSなりを修正しても良いかと思います。

この記事では、Bootstrap.Buildについて、ご紹介しました。

使い方に関しては、感覚的にサクサクカスタマイズできると思うので、ぜひ一度触ってみてください。