[臭わない]Bootstrap4を使った、ブートストラップ臭を感じさせないCSSの作り方

こんにちは。
開発チームのワイルド担当、まんだいです。

少し旧聞に属する話になるかも知れませんが、Twitter Bootstrap（以下、Bootstrap）のバージョン4が出ましたね（記事を書いている時点では既に4.1が出ている）。
特に管理画面など、手早く見た目の良いサイトを作る場合は使うことも多いかと思いますが、いかんせん気になるのは、俗にいうブートストラップ臭と呼ばれるアレではないでしょうか？

Bootstrapは、バージョン4からsassを使ったプリコンパイルに対応したので、どこまでブートストラップ臭が消せるのか、文字通り消臭（改造）してみたいと思います。

 

なんでそんなことするの？

Bootstrapは見た目こそ似たり寄ったりになってしまいますが、個人的にはデザイン面はかなり優秀だと思っていて、利用数が多いというのもそこが評価されているからだと思っています。
逆に選から漏れる場合の一番の理由も似たり寄ったりになってしまうから、ということが多いのではないでしょうか。
仕上がったHTMLの構造云々の話もあるかと思いますが、それは宗教に近いと思っているのでここでは触れません。

つまり、Bootstrapの特徴的なレイアウトや配色がなんとかできれば、Bootstrapを下地に使って、グリッドシステムやフォーム、レスポンシブレイアウトなど便利なコンポーネントの恩恵は受けつつ、デザイン面での融通も効かせるといったことが可能になります。

 

事前準備

Bootstrapのソースコード一式とsassのコンパイル環境を整えます。

 

Bootstrapのソースをダウンロード

Bootstrapのコードは、githubに公開されています。

twbs/bootstrap: The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

適当なディレクトリで、以下のコマンドを流してリポジトリをクローンします。

git clone https://github.com/twbs/bootstrap.git

 

これでソースの準備は終わりです。

 

コンパイル環境

前述の通り、Bootstrap4はsassでコンパイルするので、webpackやcompassのようなプリプロセッサが必要になります。
scssファイルをcssにコンパイルできれば何でもいいです。

私の場合、昔から使っているnode-sassを使ったgulpのタスクをコピペして使っています。
とりあえずコンパイルしたい、というだけならNode.jsが動作する環境で以下のコマンドを流すとsassのコンパイル環境が出来上がります。

npm install node-sass -g

 

上記のコマンドでnode-sassをコマンドとして使えるようになるので、あとは修正したら、node-sassコマンドでコンパイル、という流れです。

# コンパイルコマンドの例
node-sass test.scss test.css

# 自動コンパイル
node-sass test-scss test.css -w

 

node-sassコマンドは、watchオプションを持っているので、ファイルが修正されたら都度自動コンパイルしてくれる機能もあります。結構オススメです。

 

とりあえずコンパイルしてみる

git cloneした状態のBootstrapをコンパイルしてみると、素の状態のBootstrap（CDNなどからダウンロードすると取得できるもの）が出来上がります。

# git cloneした直後に
node-sass ./bootstrap/scss/bootstrap.scss /path/to/bootstrap.css

 

すぐにコンパイルは終わると思いますが、結構簡単にできてしまったのであっけないですね。
ここからが本番です。

 

Bootstrapを改造してみる

それではBoostrapを改造していきましょう！
Bootstrap自体をコンパイルする際のエントリーポイントになるscssファイルは、./scss/bootstrap.scss というファイルでした。

改造する場合、bootstrap側のscssファイルに手を入れてしまうと、バージョンアップなどでBootstrap自体をgit pullした時データが消える、もしくはgit pullできないといった現象が出て面倒です。
こういう場合、改造用に別のscssファイルを作り、そこにbootstrap.scssをインポートするという形にすると、bootstrap側のバージョンアップも簡単に行えるようになります。

改造用に以下のようなエントリーポイントになるscssファイルを設置します。

@import "/path/to/bootstrap.scss";

// 以下に改造用のスタイルを追加

 

では、まず改造で一番難易度が低く、かつ効果がある配色の変更をしてみたいと思います。

Bootstrap4では、配色や各種数値が変数で定義されているため、変数の上書きをしてコンパイルすれば、かなり色々改造できます。
変数の定義も一つのファイルに固めて定義されているので、膨大な数の変数があります。

Bootstrapで特徴的な色と言えば、青(#007bff)かなと思っているのですが、これを変更するだけでもガラッと印象は変わります。
この色で見分けている部分も多いかも知れませんね。
この色は$blueという変数で定義されていて、さらに$primaryというテーマのメインカラーにも指定されているため、純正Bootstrapを利用したサイトはこの影響を受けやすいということになります。

配色を変更する場合、手始めに以下の6つの変数を調整してみるとサイトのテーマの変化が楽しめます。

• $primary
• $secondary
• $success
• $info
• $warning
• $danger

また、フォント周りの設定も_variables.scssにありますので、フォント指定やフォントサイズといった基本的な部分から、line-hightなど、行間余白の調整などもできます。

その他、マージンやパディングの指定、角丸のサイズなどを全体的に変更する、またはコンポーネント単位で調整する、といったことも可能です。

 

まとめ

Bootstrap4を使った、ブートストラップ臭を感じさせないCSSの作り方、いかがでしょうか？
コンパイルも簡単、設定も概ね値の調整だけで簡単と、これだけの作業でいつものBootstrapが別物に映ります。

弊社で運営しているウェブ監視サービス「Appmill」でもBootstrapをベースにしたCSSでレイアウトを組んでいます。
どんな風に作っているか気になる方は一度見ていただければと思います。

 

役立つリンク

• 公式ドキュメント
• 配色の見本帳 | キーカラーで選ぶ配色パターン - 色見本とHTMLカラーコード

 
以上です。