Bootstrap（ブートストラップ）とは
Bootstrapと聞くと開発者の方は、OS起動時に実行されるプログラムを連想する方も少なくないかと思いますが、今回紹介するのはTwitter社が開発したCSSのフレームワークの方です。
Bootstrapを使うと従来floatやtableを使って実現していた横並びのレイアウトもHTMLタグへのクラス指定のみで簡単に実現することができます。
[blogcard url=”https://getbootstrap.com/docs/3.3/getting-started/#download”]
コーディング例
<div class="row">
<div class="col-sm-4 col-xs-12"></div>
<div class="col-sm-4 col-xs-12"></div>
<div class="col-sm-4 col-xs-12"></div>
</div>さらに、ブラウザの画面幅ごとにコンテンツの幅を変更することもできるので、昨今スタンダードとなったレスポンシブデザインにも柔軟に対応することが可能です。
Bootstrapの意義
Bootstrapの大きな意義は、デザインからレイアウトを切り離したところにあるものと考えます。
もともとCSS自体も、デザイン情報をHTMLから分離するという思想のもとに切り離された経緯を持ちますが、このBootstrapはさらにデザイン情報からレイアウト情報を切り離したという見方ができるのではないでしょうか。
ウェブ制作に携わっている方はおわかりになるものと思いますが、一般的なウェブページに求められるレイアウトはある程度パターン化されていて、毎回同じようなCSSを作成するケースがあります。
ですから、レイアウトに関するパーツを共通化して再利用可能にすることは開発効率を上げるために大変意義あることなのです。
Bootstrapコーディングの基本
Bootstrapの導入方法を紹介する前に、まずはBootstrapにおけるコーディングの基本について紹介します。Bootstrapを使ったコーディングがいかに簡単かを実感して頂いた後に導入をご検討頂ければと思います。
rowクラスとcolクラス
Bootstrapによるコーディングでは以下の2要素について理解しておけばとりあえずOKです。
- ・rowクラス：行
- ・colクラス：列
rowクラスとcolクラスはセットで使用します。
例えば、3列並列でコンテンツを並べたい場合は、以下のようにrowクラスで囲んだ中にcolクラスを3つ入れる形で実現できます。
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>colクラスの記述方法
colクラスの記述ルールは以下のような構造になっています。
各構成要素について説明します。
①区分
Bootstrapではレスポンシブデザインに対応するために、以下5つのブレイクポイントを設定しています。
| .col-xs- | 544px未満 |
|---|---|
| .col-sm- | 544px以上、768px未満 |
| .col-md- | 768px以上、992px未満 |
| .col-lg- | 992px以上、1200px未満 |
| .col-xl- | 1200px以上 |
ブレイクポイントやメディアクエリの設定に悩まずに開発を進められるというのはだいぶ気持ちが楽になりますよね。
②グリッド数
Bootstrapではウェブブラウザの画面を12列のグリッドで分割しています。
つまりグリッド数の指定というのは、そのカラムが12列のグリッドのうち、いくつのグリッドを占有するかという指定となります。
以下の例で言いますと、
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>コンテンツを3列並列で表示し、かつ、各コンテンツはそれぞれ4グリッド分の幅を持つという指定となります。
グリッド数は全カラムの合計が12になればよいため、各コンテンツの幅を変えるといったことも可能です。
レスポンシブデザインの実現
Bootstrapを使ったレスポンシブデザインは、コンテンツに複数の区分のcolクラスを設置することで実現することができます。
例えば、以下のような形ですね。
<div class="row">
<div class="col-sm-4 col-xs-12"></div>
<div class="col-sm-4 col-xs-12"></div>
<div class="col-sm-4 col-xs-12"></div>
</div>このように複数の区分のcolクラスを指定すれば、該当するブレイクポイントで自動的に表示するグリッド数が切り替わることになります。
この場合であれば、544px未満の画面幅（スマートフォン表示）のときは横幅いっぱいにコンテンツを表示してくれます。
独自CSSの導入方法
さて、Bootstrapのコーディングルールはわかりましたが、このルールの中で独自デザインはどうやって取り入れればよいのか迷うところです。
せっかくBootstrapを使っているのだからfloatやtable-cellはもう使いたくないですよね。
ですので、基本的には以下のような切り分けで制作を進めるとよいのではないかと思います。
- ・レイアウト → Bootstrap
- ・装飾 → 独自CSS
レイアウト部分以外は通常通りコーディングしてよいと思いますし、レイアウト部分に独自CSSを被せる場合は以下のようにクラス名をひとつ増やせばよいだけです。
<div class="row">
<div class="col-sm-4 col-xs-12 blue"></div>
<div class="col-sm-4 col-xs-12 yellow"></div>
<div class="col-sm-4 col-xs-12 pink"></div>
</div>
使ってみた感想
CSSを記述せずにHTML上のクラス指定だけでいろいろなバリエーションのレイアウトやレスポンシブデザインを実現できるのはとても便利。
要素間の間隔などもいい感じに開けてくれます。
ただ、12分割の枠組みから外れた微妙なデザインはやはり独自に実装するしかないため、bootstrapを使う場所と使わない場所の切り分けに迷う部分がありました。
ページの大まかな枠組みはbootstrapルールで実装し、細部の実装は独自で行うといった切り分けがよいかもしれません。
せっかくbootstrapを使うのだから独自CSSにはブレイクポイントの記述を入れたくない・・・という願望もありますが、致し方ないかもしれません。
本当はもっとよい使い方があるかもしれないので、引き続き何かわかればこちらのページで追記します。
bootstrapの導入方法
bootstrapの導入方法は簡単。公式サイトから「bootstrap.js」「bootstrap.css」のファイルをダウンロードしてウェブサーバー上にアップロードし、HTMLファイルの<head>内で読み込むだけで使用できます。
記述例）
<link rel="stylesheet" href="./css/bootstrap.css">
<script src="./js/bootstrap.js"></script>Bootstrapの導入方法については詳しく解説しているページがあるので参考にしてみてください。
まとめ
今回はBootstrapの有用性と基本的なコーディング方法についてまとめてみました。
Bootstrapは大変便利ですので開発時間短縮のためにも是非ご活用頂ければと思います。
ただ、Bootstrapがないと制作ができないとなってしまうとそれはそれで困ってしまいますので、独自CSSでのコーディングもしっかりできるようになっておくことは重要です。