スピード重視でwebサイトを作るならtwitterbootstrapも選択肢に入れておきたいというお話を色々な所で見かけるので自分も少し触ってみました。

twitterbootstrapとは

twitterの名が入っていますがつぶやくためのアプリとかそういうのではありません。簡単にいえばtwitter社が作った「twitterっぽいデザイン、レイアウトのwebサイトが簡単に作れるツール」です。
jqueryを元に構成されていて、グリッドシステムなんかを採用しているためレイアウトが簡単にできます。デザインに関してはあらかじめできているものを利用するならばcssに手を加える必要がありません。
また、サイトの見栄えを良くするためのjquweyも何個か用意されているのでスライダーなども比較的簡単に設置出来ます。

twitterbootstrapの使い方

1. 公式サイトでtwitterbootstrap本体をダウンロード
2. 解凍したフォルダにhtmlファイルを作成する
3. jquery、twitterbootstrap、各種cssを読み込む
4. 公式サイトのサンプルからコピー、適宜記述しながらページを組んでいく
5. 配色を後述サイトを利用して変更する

cssをいじらずにサイトの色合いを変更できる

色味の変更は直接cssをいじる以外にいくらか選択肢がある

1. stylebootstrap.info（好きな配色を入力するだけでcssをカスタムできる）
2. boottheme（好きな配色を入力するだけでcssをカスタムできる）
3. bootswatch.com(配色が決められたテンプレートをダウンロードできる)
4. lavishbootstrap(画像をアップロードするとその画像に含まれるカラーを抽出してテーマにしてくれる)

twitterbootstrap公式サイトで用意されているjavascript

公式サイトのjavascriptページに紹介されているjavascriptを利用すると簡単に一味ちがうサイトに仕上げられます。これらは公式サイトのサンプルにも組み込まれているのでコピーするだけで設置出来ます。

主なスクリプト

• モーダル（モーダルウィンドウを表示するスクリプト）
• ドロップダウン（ドロップダウンを実装するスクリプト）
• スクロールスパイ（スクロール位置にあわせてメニューをアクティブにするスクリプト）
• トグルタブ（トグル式のコンテンツを実装するスクリプト）
• ツールチップ（マウスオーバーで吹き出しを表示させるスクリプト）
• アコーディオン（アコーディオンを実装するスクリプト）
• カルーセル（カルーセルスライダーを実装するスクリプト）

その他カスタマイズ

• bootstrap関連のcssの後に新しいcssを追加すれば上書きでカスタムできる
• サイトに用意されているものとは別のjavascriptを追加する

作ってみたページ

サンプルを基に簡単なCSSなどをいじって作りました。（現状で使用しているスクリプトだとパララックスの背景はスマホだと上手く動かないんですね…）
使ったものはstylebootstrap.info、スクロールスパイ、その他jqueryはnicescroll、masonry、lazyloader、等です。masonryをtwitterbootstrapで利用するのに少し手こずったのですがこちらの記事を参考に組めました。

感想

今回はjqueryの練習のついでにtwitterbootstrapを触ってみました。サンプルを参考にして簡単なサイトを作るならすごく速くできます。カスタマイズもできるので選択肢のひとつとして面白いかもしれません。今回レスポンシブ化は行なっていないのですが、グリッドシステムを使っているので簡単にレスポンシブ化もできるようです。