Bootstrapでのデザイン変更
これまでダウンロードしたCSSファイルをそのまま使ってきましたが、BootstrapにはCSSを変更する方法も備わっています。デザインの変更方法としては、大きく以下の3つの方法が存在します。
- Bootstrapのサイトでカスタマイズ設定を行う
- LESSファイルに対してカスタマイズ設定を行う
- Bootswatchなどからデザイン設定済みファイルを入手する
1. Bootstrapのサイトでカスタマイズ設定を行う
デザインを変更するには、Bootstrapサイトのカスタマイズページを利用します。このページからCSSの変更を行うことができます。試しに、Typographyというカテゴリの「@font-family-sans-serif」という入力ボックスに、「"MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif」と入れてみましょう。
ヒラギノやメイリオが人気ですが、今回は違いが分かるように「MS Pゴシック」を設定しています。設定が完了したら、ページの一番下の「Compile and Download」ボタンをクリックしてCSSファイルをダウンロードします。ダウンロードした圧縮ファイルの中にbootstrap.cssファイルが含まれているので、Webサイト内のファイルを差し替えます。
設定可能な変数は、100を超えるコンポーネントの色やサイズです。今回の手順ではWebページからCSSを生成できるので簡単ですが、毎回手作業で変更点を入力していくことは手間がかかります。その場合は、CSSを出力する仕組みである「LESS」を編集して管理することもできます。
2. LESSファイルに対してカスタマイズ設定を行う
LESSは、CSS拡張メタ言語の一つで、変数／関数／階層化などを利用して効率的にCSSを生成できます。通常LESSを使用するためには、別途ツールを導入する必要がありますが、ここではVisual Studioの拡張機能を利用します。
MicrosoftのMads Kristensen氏が開発している機能拡張「Web Essentials」をインストールします（ここでは執筆時点で最新のWeb Essentials 2013 for Update 2 RCを使用）。このツールをインストールするとNode.jsとLESSコンパイラであるlesscが「＜ユーザーのLocalAppData＞\Microsoft\VisualStudio\13.0\Extension」配下にインストールされます。
LESSファイルの入手
Bootstrapのトップページからソースコード「bootstrap-3.x.x.zip」をダウンロードします。解凍したらLESSフォルダをVisual Studioのソリューションフォルダに追加します。BootstrapのLESSファイルの構成は以下のとおりです。
| ファイル名 | 説明 |
|---|---|
| variables.less | 変数を記載するファイル |
| mixins.less | Mixinという関数を記載するファイル |
| bootstrap.less | BootstrapのCSS本体（他のコンポーネントをインポートして集約） |
| その他のless | コンポーネント別に記載された設定ファイル |
LESSのMixinとは関数のようなもので、複数行に渡るCSSの定義を引数付で呼び出すことができます。そのため重複を減らしつつ複数個所で使用することができます。
LESSファイルの編集
それでは、先ほどと同じ手順でフォントにMS Pゴシックを追加してみましょう。LESSは、テキストファイルなので、Visual Studioのエディタで編集できます。
ここでは変数を定義する「variables.less」ファイルを開いてフォントの行を「@font-family-sans-serif: "MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif」に変更しています。その後［WEB ESSENTIALS］メニューでLESSファイルのリコンパイルを選択すると、bootstrap.less配下にbootstrap.cssファイルが生成されます。この出力されたCSSを、Webサイトに反映するとフォントが変更されます。
今回は、ASP.NETエンジニアに分かりやすい方法としてWeb Essentialsを使用しましたが、本格的な開発の時には、ソースファイルの配布物と同様にgrunt（ビルド自動化ツール）、less、csscomb（CSSの並び順を整形）、csslintrc（CSS構文チェック）を組み合わせるほうが良いでしょう。LESSの導入は少し手間がかかりますが、繰り返しCSSを出力する場合やBootstrapのバージョンアップ時にも対応が容易といったメリットがあります。
ここまで、CSSを生成する方法を紹介してきました。これらが難しい場合には、別途CSSファイルを追加し単純にスタイルを上書きすることも可能です。チームのスキルに合わせて方針を検討すると良いでしょう。
