レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝

Posted on: 2012/06/22

レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝

Bootstrapの概要

Bootstrap とは、Twitter 社が提供する CSS フレームワークです。
実体は CSS と JavaScript で、決められたルールに従ってコーディングするだけで、いま流行りのいろいろな UI を作ることができます。

Bootstrap では LESS を採用しており、スタイルをカスタマイズして CSS をコンパイルすることができます。
LESS についてはこちら。

実際には、コンパイルされた CSS を読み込んで利用することになるので、LESS の仕組みを意識する必要はありません。
もちろん、コンパイルされた CSS を編集することもできます。

Bootstrap をはじめて使う時は、まずは一式ダウンロードして、いろいろ試してみるといいと思います。
その後、実際に使う時は、必要な CSS、JavaScript をカスタマイズした方がいいでしょう。

Bootstrap > Customize and download

Responsive design – レスポンシブデザイン

CSS フレームワークの中で Bootstrap が注目されている理由に、レスポンシブデザインが採用されている点があげられます。
レスポンシブデザインとは、ワンソースのWebサイトを CSS3 メディアクエリを使って、異なるデバイス、画面サイズに応じて自動的にレイアウトが調整されるようにするコーディング手法です。
これはマルチデバイス対応へのひとつの解と言えます。

PCの画面サイズ 900px と、スマートフォンの画面サイズ 480px で見ると、レイアウトが変化します。これがレスポンジブデザインです。

レスポンシブデザインの基本 – CSS3 メディアクエリ

マルチデバイスのブレイクポイント（レイアウトを切り替える幅）を決定して、それぞれの画面サイズに応じた CSS を記述します。

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

それでは代表的な機能を紹介します。

grid system – グリッドシステム

Default grid system

<div class="row">
	<div class="span4">…</div>
	<div class="span8">…</div>
</div>

全体を 12カラムで分割。
class=”span4″ なら、4/12、つまり全体の 1/3 幅のカラムが生成されるイメージ。

全体を分割するカラム数、1カラムの幅、カラム間の幅によって、コンテンツ全体（class=”container”）の幅が決定されます。

Offsetting columns

<div class="row">
	<div class="span4">...</div>
	<div class="span4 offset4">...</div>
</div>

class=”offset4″ だと、4カラム分、間が空いて配置されるイメージです。

Fluid grid system

<div class="row-fluid">
	<div class="span12">
		Level 1 of column
		<div class="row-fluid">
			<div class="span6">Level 2</div>
			<div class="span6">Level 2</div>
		</div>
	</div>
</div>

親カラムの幅を基準として 12カラムで分割です。

Grid customization – カスタマイズ

@gridColumns	12	分割するカラム数
@gridColumnWidth	60px	1カラムの幅
@gridGutterWidth	20px	カラム間の幅

これらの値は、Bootstrap > Customize and download でカスタマイズすることができます。

ディフォルトでは、@gridColumns=12、@gridColumnWidth=60px、@gridGutterWidth=20px となっています。

この場合、サイト全体の幅（class=”container”）は、12カラム（60px × 12）+ カラム間（20px × 11）= 940px になることがわかります。

コンパイルされた CSS も以下のようになっています。

[class*="span"] {
	float: left;
	margin-left: 20px;
}
.container { width: 940px; }
.span12 { width: 940px; }
.span11 { width: 860px; }
.span10 { width: 780px; }
/* 省略 */

Fluid grid の場合は % 指定ですね。

.row-fluid .span12 {
	width: 99.99999998999999%;
	*width: 99.94680850063828%;
}
.row-fluid .span11 {
	width: 91.489361693%;
	*width: 91.4361702036383%;
}
.row-fluid .span10 {
	width: 82.97872339599999%;
	*width: 82.92553190663828%;
}
/* 省略 */

これらはすべてレスポンシブデザインになっているので、実際には可変です。
例えば、1200px以上の大画面の場合、全体幅も拡張されているのがわかります。その逆もしかり。

@media (min-width: 1200px) {
	.container { width: 1170px; }
	.span12 { width: 1170px; }
	.span11 { width: 1070px; }
	.span10 { width: 970px; }
/* 省略 */
}

あとでじっくり CSS を分析してみてください。

導入方法

Getting started の手順に従えば簡単に導入できます。

ただし、Basic HTML template に記述されているテンプレートは不十分というか不親切ですね。。
Bootstrap は jQuery が必須なるので、テンプレートは以下になります。

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap 2.1.0 Template</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	...
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</body>
</html>

続きと所感

ということで、これが CSS フレームワーク「Bootstrap」の概要、そして思想です。
具体的にどのような UI が作れるかは、公式サイトを見てください。あえてここで解説するまでもありません。

さて、CSS フレームワークを導入すると、いま流行りのいろいろな UI が簡単に作れますが、逆に、すべて同じようなサイトになってしまう可能性も大いにあります。
やはり、コンパイルされた CSS をカスタマイズできるスキルは必須と言えるでしょう。

また、Bootstrap の特徴としては、やはりレスポンシブデザインに対応していることだと思います。
レスポンシブデザインは今後スタンダードになる可能性大のコーディング技術ですので、それを学ぶ為にも Bootstrap の CSS を読み解くのは勉強になると思います。

もちろん、マルチデバイスを想定していなくても使えますが、レスポンシブデザインになっていることをまったく無視して作ってしまうと、意図しないレイアウト崩れに悩むことになるので注意した方がいいでしょう。

ちなみに、Bootstrap をレスポンシブデザインのテンプレートとして見るならば、あまりいい出来だとは思いません。レスポンシブデザイン部のカスタマイズがしにくい点も含めて。

レスポンシブデザインについてはまた別途記事にまとめたいと思います。

個人的な所感としては、Bootstrap は CSS フレームワークとしては素晴らしい。でも実際に使うなら JavaScript コンポーネントだけ拝借すればいいかな、といった感じです。

本当の肝

BootstrapはただのCSSフレームワークではない。
それを支えているCSS Transitionという仕組みが内蔵されています。これが素晴らしい。
ドキュメントにはまず記載されないところなので、JavaScriptファイルの冒頭を是非読み解いてみてください。
このCSS Transitionのコールバックを返すロジックこそが、本当の肝と言えるでしょう。

hijiriworld Web