BOOTSTRAP①

Bootstrapとは？

Bootstrapは、Twitter社が開発している CSSフレームワーク です。
数あるなかで、ダントツに一番人気の CSSフレームワーク でしょう。

Bootstrapは、ウェブサイト制作時に使用頻度の高いスタイルをひとまとめにしたパッケージです。

あらかじめ見映えの良いスタイルが色々と準備されているので、デザインに自信がない人でも、サクッとおしゃれなウェブサイトが作れます。

そんなbootstrapを使いこなすための肝が「グリッドシステム」。
このモバイル時代にふさわしい、強力かつ柔軟な仕組みで、複雑なレイアウトでも爆速でレスポンシブデザインを実現できます。

グリッドシステムを支える3つのCSSクラス

Bootstrapのグリッドシステムはホントによくできています。
12個に分割されたグリッドを、必要に応じて結合して利用します。
例えば、サイドメニューとコンテンツなど、左右に2分割したい場合は、カラムを4：8（合計12）に分割、3カラムのレイアウトを作りたい場合は、4：4：4に分割するなど、デザインに合わせて様々なレイアウトを実現できます。

3つのクラスさえ理解しておけば、複雑なレイアウトもなんのその。
レスポンシブも余裕です。

• .container
• .row
• .col

それぞれの使い方を見ていきます。

.container

コンテナに与えるクラスです。コンテナは格納庫という意味です。
下の画像を見ると、.containerは.rowと.colを格納していることがわかります。

.containerは決められた幅を持ちます。
レスポンシブデザインは、スマホ、タブレット、パソコンなど異なる画面幅に合わせてレイアウトを切り替えます。
Bootstrapでは、閲覧側の画面幅を「極小から特大」までの5種類を想定し、.containerの幅も5段階に分け用意されてます。

• Extra small ／ 画面幅 極小（544px未満）
• Small ／ 画面幅 小（544px以上 768px未満）
• Medium ／ 画面幅 中 （768px以上 992px未満）
• large ／ 画面幅 大 （992px以上 1200px未満）
• Extra large ／ 画面幅 特大 （1200px以上）

この5種類の画面幅に対して、.containerの幅も5段階あります。

例えば、スマートフォン（Extra small）の場合、画面幅いっぱいに表示されます。

これに対し、それ以外（タブレットやPC）の場合、画面に合わせた固定幅で表示されます。

.container-fluid

コンテナ用のクラスにはもう一つ.container-fluidがあります。

.container-fluidは、ブラウザのウィンドウ幅いっぱいに広がります。
ウィンドウのサイズを狭くしたり広くしたりすると、.container-fluidの幅も流動的に変化します。

.row

行に与えるクラスです。.rowはコンテナを水平に分割し上から下へと並びます。.rowの中に.colを定義しレイアウトを組みます。

.col

列を表すクラスです。カラムという呼び方のほうが親しみがあるかも。
.colは.rowを縦に割り左から右へ並びます。

.colのあとに-（ハイフン）で文字列をつなぐことで、「この画面では、この個数のグリッド」ということを指定します。

ひとつめの-の後ろには画面幅を表す文字列が入ります。
画面幅は5種類でした。
「極小から特大まで」のクラスは次のように記述します。

Extra small：.col-xs-
Small：.col-sm-
Medium：.col-md-
Large：.col-lg-
Extra large：.col-xl-

ふたつ目の-のあとにグリッドの個数を数字で加えます。
例えば、.col-md-4と記述すると、画面幅がMiduim以上のときはグリッドを4個持つカラムを生成します。

つまり、カラム数の合計が「12」になるように記述すれば、3カラムでも4カラムでも12カラムでも、画面を好きなように分割できる、ということです。

このコードを自分で記述するのは憶えるのが大変ですが、簡単な操作で実現出来るように、Adobe Dreamwaverは作られています。

BOOTSTRAP②以降では、簡単に爆速でサクッとおしゃれなウェブサイトを、サンプルを参考に作っていきます。