DrupalとTwitter Bootstrap

Twitter Bootstrap

簡単にイマっぽいサイトを構築するためのCSSフレームワークのひとつです。レスポンシブデザインを容易に実現すべく、これまでZenのテーマを親テーマとしたサブテーマ使っていました。Zenも優れたCSSフレームワークですが、Drupal専用です。

一方BootstrapはCSSとJavascriptをパッケージされたものが、あのTwitterから配布されているもので、WordPressサイトやRuby on Railsサイト等でもよく利用されているようです。

これをDrupalに簡単に組み込むためのテーマBootstrapがまだベータ版の状態（Drupal7のみ）ですが、配布されているのを見つけ、試してみたところ、極めてスグレモノで、これは人に教えたくない、と思ったくらいです。

Bootstrapのテーマには通常のテンプレートファイルの他、includesディレクトリに、Drupalの初期設定をTwitter Bootstrapに最適化するためにオーバーライドする関数がひと通り組み込まれています。これでフォームの要素やページャー、メニューなどが驚くほど快適にTwitter Bootstrap化されるようになります。

スクリーンショットは当サイトのフロントページのiPhoneでの表示です。ご覧のブラウザの横幅を狭めると同じ表示になります。

Twitter Bootstrapの最新バージョンは2.3.1で、2.0以降レスポンシブデザイン対応になったようです。

インストール

Bootstrapのテーマをテーマディレクトリに入れます。Bootstrapテーマディレクトリ内にTwitter Bootstrapを入れます。

theme/bootstrap/bootstrap/js/bootstrap.js
theme/bootstrap/bootstrap/css/bootstrap.css
・・・

といったパスになります。

Bootstrapのテーマはそのままにしておいて、自分用のサブテーマを作るのがベターです。

テーマディレクトリにmy_themeディレクトリを作成、bootstrapのinfoファイルをmy_themeディレクトリにコピーしてmy_theme.infoにリネーム、name = my_theme、base theme = bootstrap、としてmy_themeを有効化します。

あとはbootstrapテーマのディレクトリ内の構成に沿って、オーバーライドするテンプレートファイルやcssを必要に応じて追加してやるといいです。

それから重要なポイントなのですが、自分が試した限り、jQueryは1.7でないと動きません。jQuery Updateのモジュール7.x-2.x-devをインストールしてjQuery1.7に設定しておきましょう。7.x-2.3は1.7の選択ができないのでダメです。

グリッドレイアウト

12段のグリッドレイアウトになっていて、例えばコンテンツ欄にspan9、サイドバーにspan3といった具合に、span1~12のHTMLのクラスを設定するだけで、安定した段組ができあがります。floatやpadding等の属性はこのspan1~12クラスが適切に設定してくれます。

基本は横幅960pxに設定されており、span9は720pxということになりますが、spanに左マージン20pxが設定されているので、コンテンツ領域は700pxということになります。

レスポンシブデザイン

デフォルトでは980pxをメディアクエリのブレイクポイントとして、画面の横幅が979px以下の場合、ナビゲーションボタンが表示され、ナビゲーションが縦方向に開閉式になります。768~979pxではコンテンツ領域は724pxに縮められ、767px以下では、span1から9のwidthが100%になり、サイドバーはコンテンツ領域の下に廻ることになります。

768~979pxでナビゲーションが開閉式になってしまうと、タブレットではかなり間延びした感じになってしまいます。自分の場合、767~979pxではナビゲーションボタンを非表示、ナビゲーションメニューを展開した状態にし、スマホや、Nexus7のようなミニタブレットの縦向き（ポートレイト）以下、ミニタブレットのランドスケープ（横向き）~10インチサイズタブレットのポートレイト、それ以上の3つに切り分けています。

ナビゲーションボタンの表示非表示やナビゲーションメニューの開閉といった設定は結構面倒ですが、Twitter Bootstrapでは至極簡単に設定できる訳です。

HTML要素のマークアップ

Bootstrapのマークアップを組み込むと簡単にカッコいい表現ができるようになります。例えば、tableタグにclass="table"とつけると、適切な余白をもった見やすいテーブルができあがります。さらにclass="table-striped"と付け加えると、1行毎に色が変わり、class="table-hover"と付け加えると、カーソルに合せて色が変わります。

さまざまなマークアップがありますが、詳しくはBootstrapサイトのBase CSSページでどうぞ。

BootstrapのテーマはDrupalの基本的な要素をBootstrap化してくれています。例えばテキストフィールド等のフォーム要素やペジネーションのボタン類とかです。管理画面もサイトデフォルトに設定しておくと、なるほどね、と思うことがいっぱいあると思います。

毎回同じようなCSSを書いていた自分にとっては目からうろこ、Bootstrapのキモになる部分です。

アイコン

Base CSSページにあるように多くのアイコンが使えるようになります。<i class="icon-star"></i>とやると★のアイコンが表示されます。

これだけだと面白くもないのですが、このアイコンをウェブフォントにすることができます。Bootstrapをダウンロードする際にCustomizeのページでIconsのチェックボックスのチェックを外してダウンロードしておきます。

Elusive IconsでBootstrapに対応したアイコンのウェブフォントが配布されています。他にもあるようです。

elusive-webfont.cssをtheme/bootstrap/bootstrap/cssディレクトリに入れ、fontディレクトリをtheme/boostrap/bootstrap/ディレクトリに入れます。

これでアイコンのサイズや色も自由に変えられるようになります。

レガシーブラウザ対応

BootstrapはIEにもかなり安定した対応しています。IE対策としてBootstrapを採用する理由になるくらいです。ただIE8以下用には若干の修正は必要になるかと思います。

フォントサイズ

Bootstrapのフォントサイズは基本14pxに設定されています。Zenではかなり細かく丁寧にemによりフォント設定されています。

emで設定するとスマホではポートレイトとランドスケープで文字サイズが大きく変わってしまいます。ここはピクセルでの設定が正解だと思います。

ユーザーエクスペリエンスの観点から、これまでemによるフォントサイズ設定が常識とされていたのですが、時代は変わったと思います。

参考サイト

あのドットインストールでTwitter Bootstrap入門講座があります。ここで全18回を勉強してみてください。

ドットインストールのサイト自体Bootstrapでできているそうです。なるほど、パンくずリストのところとかデフォルトのまんまです。