Twitter Bootstrap のカスタマイズをライブラリ本体に手を入れずに行う

Twitter Bootstrap をカスタマイズするのに、Bootstrap ライブラリ本体に手を入れるのはまずいだろうと思い、独自に拡張してカスタマイズする方法を考えました。Sass の @extend の機能を使い拡張する方法と、Sass を使わない通常の CSS を用いる方法の二種類です。

スポンサーリンク

bootstrap の navbar-inverse の背景色を変更したくて検索したのですが、出てくる情報が Bootstrap 本体の CSS に直接手を入れる方法が多かった。本体に手を入れちゃうと、カスタマイズやメンテを行う度に、本体の膨大なコードを漁らなければならず大変だろうと思います。

Rails プロジェクトで Sass の Bootstrap(bootstrap-sass 3.0.2)環境で作業を行いましたが、bootstrap-sass じゃなくても Bootstrap + Sass の環境であれば同じ方法を使えると思います。また Sass を使わない環境でも、Bootstrap で定義してある同名のセレクタを定義しなおして、プロパティを上書きしたり追加したりする方法が使えます。

— 環境 —
Rails 4.0.1
bootstrap-sass 3.0.2.0

Sass の @extend を使い拡張する方法

Bootstrap 本体で navbar-inverse の背景色(background-color)の設定箇所を探すと、以下にありました。

bootstrap/_navbar.scss

ここで、background-color が $navbar-inverse-bg で指定してあることが分かりました。$navbar-inverse-bg は調べてませんが、ブラウザで確認するとデフォルトのヘッダー背景は黒なので black でしょう。この値を上書きするので、Bootstrap の CSS コードを読んで調べる必要はありません。

rails_root/app/assets/stylesheet/custom.css.scss

カスタマイズ用の CSS(SCSS)ファイルに以下のように書く。

@extend で先に .navbar-inverse を継承して、その後 background-color を red(赤)で上書きします。CSS はプロパティが重複した場合、下に書いたプロパティが優先する(下のプロパティが上のプロパティを上書きする)というルールを利用しています。Bootstrap はアップデートで平気で CSS セレクタがなくなったりするので、万一 navbar-inverse がなくなった時のために !optional フラグを付けています。独自のプロパティも追加可能。

@extend – Sass 3.3で追加された「関数」や「変更点」のまとめ解説 | HTML5Experts.jp

HTML ファイル(Rails ではビューファイル)

以下のように、navbar-inverse-red を指定します。

Sass を使わない方法

カスタマイズ用の CSS ファイルに以下のように書く。

独自の CSS セレクタ名は定義できませんが、Bootstrap 本体と同名の .navbar-inverse を定義して、background-color プロパティを上書きします。また必要に応じて、独自のプロパティも追加できます。

HTML 側は、navbar-inverse を指定します。

こちらの方法であれば、どのような環境でも使えます。

以上の2つの方法で、Bootstrap 本体に手を加えずに、Bootstrap のカスタマイズを行えます。プログラミングではオブジェクト指向の基本ですけど、オリジナルの機能を継承して独自に拡張していくのがカスタマイズの王道です。Sass にはせっかく @extend という超便利な機能があるので、これをガンガン使っていこう。

スポンサーリンク
私は CSS がちょっと苦手なので勉強せねば...
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!