CSSフレームワークの一つであるBootstrapの簡単な使い方を紹介します。CSSを書いてて良く思うのですが、決まった挙動やレイアウトにする場合に毎回書くのがめんどくさくなるんですよね。
そういうときに役立つのがフレームワーク。このBootstrapもフレームワークの一つで既にCSSが記述されているファイルを読み込んで、HTMLにクラス属性を書くだけで簡単に使うことができます。
このブログでもBootstrapに切り替え、簡単にレスポンシブデザインを構築することができました。また、レイアウトだけでなくjQueryを使ってドロップダウンメニューやタブナビ、ツールチップなど一般的なWebアプリで使えるようなライブラリが入っています。
この記事はBootstrap2の使い方についての内容です。Bootstrap3についてはこちらをご覧ください。
Bootstrapのダウンロード
では早速使ってみましょう。まずはファイルのダウンロードをします。
Bootstrap
解凍すると中にはCSSファイル、icon用のimgファイル、jsファイルがあります。とくに設定などはなく、これを普通に読み込むだけで簡単に使えます。
また、Bootstrapのサイトで以下のようなHTMLのテンプレートが用意されています。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- レスポンシブレイアウトの場合は続けて以下も読み込む -->
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="all" />
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
ここからはこのBootstrapでレイアウトを構築していく場合の簡単な使い方を紹介していきます。あっという間にレスポンシブデザインが出来てしまうので是非使ってみて下さい。
Bootstrapでレイアウト
複雑なグリッドレイアウトを実装する場合、普通ならfloat:leftで・・・などと細かいところをいじってましたが、フレームワークを使えばそういうことは一切なし。HTMLにクラスを指定するだけで簡単に複雑なグリッドレイアウトを構築できます。
やりかたの例は、こちらも公式サイトにのっているのでみてみましょう。基本的には.span6などのように記述するだけでグリッドレイアウトを作ることが出来ます。.spanの後ろの数字は１２まであり、画面を最大１２カラムに分けることができます。
この画像の場合だと以下のようなコードになります。グリッドを作るときはdiv.rowで囲うのを忘れないようにしましょう。
<div class="row">
<div class="span9">
<div class="row">
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
</div>
<div class="span9">
<div class="row">
<div class="span2"></div>
<div class="span3"></div>
<div class="span4"></div>
</div>
</div>
<div class="span9">
<div class="row">
<div class="span4"></div>
<div class="span5"></div>
</div>
</div>
</div>
またoffsetを加えることで間隔を空けるようにレイアウトすることもできます。中央寄せにしたい場合は.containerで囲むことで実装可能です。
<div class="container">
<div class="row">
<div class="span9">
<div class="row">
<div class="span4"></div>
<div class="span3 offset2"></div>
</div>
</div>
<div class="span9">
<div class="row">
<div class="span3 offset1"></div>
<div class="span3 offset2"></div>
</div>
</div>
<div class="span9">
<div class="row">
<div class="span6 offset3"></div>
</div>
</div>
</div>
</div>
さらにブラウザの横幅でdivのサイズも変わるようなフレキシブルなレイアウトにしたい場合は.container-fluid、.row-fluidと指定するだけで簡単に変更可能。レスポンシブにいたってはHTMLでbootstrap-respnsive.min.cssを読み込むだけで実装可能です。
このブログでもBootstrapを使ってレスポンシブデザインを作っているので参考にしてみて下さい。今まで一からCSS書いてたのと比べると恐ろしく簡単にレイアウトのデザインが可能になりました。
レイアウトだけでも十分使う価値がありますね。ほかにもツールチップやプルダウンメニューなどの便利なライブラリが用意されています。レイアウトと同様クラスの指定だけで使えるのでものすごく簡単に使えます。
以上、TwitterBootstrapを使って簡単にCSSレイアウトを実装する方法を紹介しました。以下のリンクではBootstrapの最新版Bootstrap3の使い方を解説しています。そちらも合わせてお読みください。
神ってるWebデザイナーになるためのBootstrap3の始め方
最後までお読みいただきありがとうございました 🙂
