HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた
そんな訳で、Twitter Bootstrap をカスタマイズしたオリジナルのテーマを作ってみたのでご紹介したいと思います。
前置き - Twitter Bootstrap について
今さらここで語るのも野暮といえるほどメジャーなフレームワークですが、これを読んでいただいている方々の中に一人だけ知らなくて悲しんでいるアノ娘のためにも、軽ーく解説しておくとします。
概要
トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。
うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0のリリースもすでに予告されており、IE8 といったレガシーブラウザのサポートを廃止したり、利用頻度の低いコンポーネントを廃止してより軽量化を図るなど、大胆なテコ入れが施されているようです。
Bootstrap の最新情報に関しては、こちらの公式ブログにて随時アナウンスされていますので、ご興味がある方はチェックしてみてはいかがでしょう。
当然英語ですが、全体的にシンプル且つ明瞭な文章で書かれているためか、読めない・書けない・喋れない僕でも何となく理解できているので、何の問題もありません。
Bootstrap はオープンソース
単に完成品が zip 形式でダウンロード出来るだけでなく、ひと通りのソースコードが Github にて公開されています。
ご覧いただくとお分かりの通り、Bootstrap は Less で書かれています。各コンポーネントごとにファイルがキレイに分割され、それらの間での再利用が効くように変数は variable.less で、Mixin （※関数のようなもの）は mixins.less でそれぞれ一元管理されています。実に効率的な構成です。初めて見たときは目からウロコでした。
僕自身も業務にて SCSS（Sass）を利用したりしますが、ファイルの分割が中途半端であったり、変数や Mixin がファイルのあちこちに点在してしまうなど実に無様なソースコードを書いていましたが、Bootstrap の構成に倣ってから幾分は整理されたコードを書くことが出来るようになりました。
Less、SCSS（Sass）で CSS を書いている方でまだ未見でしたら、是非とも一度 Bootstrap のソースコードに目を通しておきましょう。
なんと全ソースを SCSS で書きなおした猛者がいました
何らかのツールを使ったのか、はたまたマンパワーで全て書きなおしたのか定かではありませんが、Bootstrap の Less ファイルを全て SCSS で書きなおした猛者がいました。
なんということでしょう。フォーク数が本家を超えています。compass の利便性から SCSS ユーザーが多いのは頷けますが、この猛者は本家 Bootstrap がバージョンアップする度に対応していくんでしょうかね？それはそれで修羅の道だと思いますが、せっかく作ってくれたモノなので素直にその恩恵にあずからないと損です。
せっかくなのでオリジナルテーマをつくってみた
そんな訳で、Bootstrap のソースコードに手を加えてオリジナルのテーマを作ってみました。
GreenMind
名称に深い意味は無いのですが、公開する以上は何らかの名前が必要なので、ベースカラーが緑色という点から名づけました。
基本的には本家 Bootstrap から大きく逸脱していないつもりですが、以下のような特徴があります。
1. アイコンを Web font に変更
本家におけるアイコンは PNG 画像による CSS Sprite で実装されていますが、小さいサイズでの利用に制限されるというデメリットがあります。そこで当テーマでは Elusive Icons という Web フォント形式のアイコンに差し替えることで、サイズだけでなく色も自由に変更できるようにしました。
2. Inverse を除外
ボタンやアラートコンテナ等の色にある Inverse というスタイルを除外しました。名前の通りメインとなるテーマカラーの対称となるスタイルですが *2、全体の調和を乱す場合が多いので思い切って除外しました。ちなみに本家 Bootstrap においてもバージョン3.0にて廃止されることがアナウンスされています。
3. List view コンポーネントを新規に追加
Windows8 の Modern UI に見られるようなコンポーネントを新規に追加しました。
4. Image collection コンポーネントを新規に追加
本家にも thumbnails といった画像に対するスタイルはいくつか用意されていますが、テキスト付きのコンテナが個人的に欲しかったので追加してみました。
5. テーブルをレスポンシブWebデザインに対応
モバイル端末など表示領域の狭い環境においてテーブル表示を最適化させる処理を追加しました。
他にもいくつか変更点はありますが、ソースコードは全て GitHub で公開していますので実際にご覧になってみて下さい。
おまけ - Bootstrap をベースにしたテーマいろいろ
巷では Bootstrap をカスタマイズして作られたテーマが数多く出回っています。そんなテーマを纏めたサイトで代表的なトコロをご紹介しておきます。
Bootswatch
2013年4月時点で12種類のテーマが無償で公開されています（※最初に見たのは半年以上前ですが、そこから更新はされていないようです）。基本的に本家 Bootstrap のテーマから大きく逸脱したものは無く、色合いやフォントをアレンジした程度にとどめてあるので、HTML はそのままに読み込む CSS を差し替えるだけで利用することが出来ます。
{wrap}bootstrap
2013年4月時点で400種類以上のテーマが公開されています。こちらは時折新しいテーマが追加されている模様。全て有償のテーマですが、無償のと違ってオリジナルのコンポーネントが追加されているなど大幅なカスタマイズが施されているのが多く見受けられます。
Bootstrap Expo
2013年3月3日にローンチされたばかりのサイトで、GitHub公認のまとめサイトです。まだ展示数は少ないですが、そのどれもが「え！これホントにBootstrapがベースになってるの！？」と思ってしまうほどにユニーク且つ美しく作りこまれているモノばかりです。超オススメ。
脚注
- 自分はこちらのブログ記事で知りました。恐らく日本で最初期に紹介した記事ではないでしょうか（デザインが苦手なWebサービス開発者に朗報！今風のデザインがさくっと作れる『Twitter Bootstrap』が凄まじく充実している件） ↩
- 直訳すると”あべこべの”や”
逆の ”という意味です。 ↩
