- 更新日: 2014年3月17日
- HTML & CSS
Twitter Bootstrap のカスタマイズをライブラリ本体に手を入れずに行う
Twitter Bootstrap をカスタマイズするのに、Bootstrap ライブラリ本体に手を入れるのはまずいだろうと思い、独自に拡張してカスタマイズする方法を考えました。Sass の @extend の機能を使い拡張する方法と、Sass を使わない通常の CSS を用いる方法の二種類です。
画像付き英語辞書 Imagict | 英単語をイメージで暗記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
|
1 2 3 4 |
.navbar-inverse { background-color: $navbar-inverse-bg; border-color: $navbar-inverse-border; ... |
ここで、background-color が $navbar-inverse-bg で指定してあることが分かりました。$navbar-inverse-bg は調べてませんが、ブラウザで確認するとデフォルトのヘッダー背景は黒なので black でしょう。この値を上書きするので、Bootstrap の CSS コードを読んで調べる必要はありません。
rails_root/app/assets/stylesheet/custom.css.scss
カスタマイズ用の CSS（SCSS）ファイルに以下のように書く。
|
1 2 3 4 5 6 |
/* extend bootstrap */ .navbar-inverse-red { @extend .navbar-inverse !optional; background-color: red; ... } |
@extend で先に .navbar-inverse を継承して、その後 background-color を red（赤）で上書きします。CSS はプロパティが重複した場合、下に書いたプロパティが優先する（下のプロパティが上のプロパティを上書きする）というルールを利用しています。Bootstrap はアップデートで平気で CSS セレクタがなくなったりするので、万一 navbar-inverse がなくなった時のために !optional フラグを付けています。独自のプロパティも追加可能。
@extend – Sass 3.3で追加された「関数」や「変更点」のまとめ解説 | HTML5Experts.jp
HTML ファイル（Rails ではビューファイル）
以下のように、navbar-inverse-red を指定します。
|
1 |
<header class="navbar navbar-fixed-top navbar-inverse-red"> |
Sass を使わない方法
カスタマイズ用の CSS ファイルに以下のように書く。
|
1 2 3 4 5 |
/* extend bootstrap */ .navbar-inverse { background-color: red; ... } |
独自の CSS セレクタ名は定義できませんが、Bootstrap 本体と同名の .navbar-inverse を定義して、background-color プロパティを上書きします。また必要に応じて、独自のプロパティも追加できます。
HTML 側は、navbar-inverse を指定します。
|
1 |
<header class="navbar navbar-fixed-top navbar-inverse"> |
こちらの方法であれば、どのような環境でも使えます。
以上の2つの方法で、Bootstrap 本体に手を加えずに、Bootstrap のカスタマイズを行えます。プログラミングではオブジェクト指向の基本ですけど、オリジナルの機能を継承して独自に拡張していくのがカスタマイズの王道です。Sass にはせっかく @extend という超便利な機能があるので、これをガンガン使っていこう。
- HTML & CSS の関連記事
- 画像がはみ出るのを防ぐCSSスタイルシート指定(モバイル・スマホ対応)
- SassとSCSSを変換するsass-convertコマンドとウェブサービス
- CSSをBEM/MindBEMdingの命名規則で書いてみる
- Twitter Bootstrapのデザインと挙動を気軽にテストできるBootplyが超絶便利！
- CSSでスクロールバーをデザイン(WebKitブラウザ)
- はてなブックマーク人気記事ブログパーツのデザイン変更
- Twitter Bootstrapで端末サイズ毎にHTML要素の表示・非表示を切り替え
- Bootstrap3をInternet Explorer8(IE8)に対応させる
- Sass の @extend で存在しないセレクタを指定する
- Rails + bootstrap-sass で submit ボタンに class, id を割り当てずに css を指定
Leave Your Message!