Bootstrapとは ～メリット・デメリット～

こんな悩みはありませんか？
HTMLの知識は何となくある。だけど自分で作るものは古臭いと言われてしまう、新しいCSSを勉強して追加したらブラウザによって表示がまちまち。
HTMLの基本的な知識はあってもHTMLは日進月歩。10年前の知識は今となってはもう使えません。Webデザインの世界では10年前どころか半年さえ一昔なのです。
専門家でもないのに毎日新しい情報を追いかけるのは大変です。

Bootstrapって何？

Web開発の現場でよく聞く「Bootstrap」、「ぶーとすとらっぷ」と読みます。
これって一体何なのでしょう？これがあればデザイナーがいらない？工期が短縮できる？
一緒に聞くのは魔法のような言葉ばかり。これが本当なら素晴らしいですね。
実際にパーツを表示させながら見ていきましょう。

Bootstrapを使ってみる

導入は簡単。ダウンロードしたファイルを配置し、そこにリンクを貼るだけです。

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
<script src="js/bootstrap.min.js">

これだけで、「いまどき」「おしゃれ」なデザインを使うことができます。

※jqueryのバージョンは変更になる可能性があります。

BootstrapはCSSのフレームワークの一種です。
CSS、つまりWebサイトのデザインを司る部分。デザインパーツ集をイメージしてください。
ボタンやヘッダなど、htmlにクラス名を追加するだけで見栄えの良いページが出来上がります。
例えば丸い画像がページの両端にあるデザインのHTMLを作りたいとします。

手法①　Webページの両端に画像を表示させてみる

10年前なら多くの人がこう書いていたでしょう。

HTML:1

<table width="100%">
<tr>
<td><img src="..." alt="...">
<td align="right"><img src="..." alt="...">
</tr>
</table>

CSS

なし

表示結果

まず丸い画像を用意します。画像編集アプリで丸く切り抜かなければいけませんね。アプリの使い方も覚えましょう。
素材が揃ったらようやくHTMLの作成です。
Excelのセルの大きさを変えて中に部品を入れていくイメージですね。
手間がかかりますが、複雑なレイアウト表現するにはテーブルを使うしかありませんでした。
もしかしたら今でもtableをつかって要素を配置している人がいるかもしれません。
ところがこれは良い方法ではありません。
昔は画面でそれらしく見えれば問題なしとされていましたが、今はダメサイトの烙印を押される結果に。

豆知識■HTMLとCSSの分業

現在、「HTMLは構造文章。デザインはCSSに分離しよう」という考えが一般的になっています。
この考えに沿った場合、レイアウトをするためにテーブルを利用するのは本来の使い方ではない、ということになります。
googleなどの検索エンジンで上位を狙いたい場合には致命的な欠陥とみなされます。
また、構造を正しくするということは、保守をする上でも重要です。
今や見た目だけでよし！という時代ではなくなってしまいました。

手法②　Bootstrapと画像編集アプリを使わずに、Webページの両端に画像を表示させてみる

ではこれを最新のHTML知識がある人に頼んでみましょう。
すると以下のようなHTMLとCSSが送られてきました。

HTML:2

<div class="cf thumbnail">
  <div class="fl"><img src="..." alt="..."></div>
  <div class="fr"><img src="..." alt="..."></div>
</div>

CSS

.cf{
  overflow: hidden;
  *zoom: 1;
}
.cf:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: ".";
}

.fl {float: left;}
.fr {float: right !important;}

.thumbnail img {
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  -ms-border-radius: 50px;
  height: 40px;
  width: 40px;
}

表示結果

ふむふむ。問題はなさそうです。
四角い画像もCSSが丸く切り取っています。
CSSがHTMLより長くなってしまいましたが、HTMLはずいぶんすっきりしましたね。

手法③　Bootstrapを使って、Webページの両端に画像を表示させてみる

それでは、同じことをBootstrapでやってみましょう。
やり方は簡単。公式サイトでやりたい要素を探し、コピーして持ってくるだけです。

HTML:3

<div class="row">
  <div class="col-md-6"><img src="..." alt="..." class="img-circle"></div>
  <div class="col-md-6 text-right"><img src="..." alt="..." class="img-circle"></div>
</div>

CSS

なし

表示結果

簡単です。CSSを書き足すこともなくできてしまいました。 クラスがたくさん付いていることを除けば、もらったHTMLと同じ構造をしています。 なるほど便利ですね。

右側の画像を右寄せにする「text-right」を追加して、出来上がり。

レイアウトの変更に強いBootstrap

しかし、ここでお客様から変更の依頼がやってきました。
左右の画像の真ん中に1つ足して欲しいという内容です。
前者(HTML:2)の場合、HTMLを追加するだけでは実現できませんね。レイアウトが崩れてしまいました。
作った人に戻さなければいけません。

Bootstrapならどうでしょう？
要件を満たすものはあるでしょうか？

HTML:3-2

<div class="row">
  <div class="col-md-4"><img src="..." alt="..." class="img-circle"></div>
  <div class="col-md-4 text-center"><img src="..." alt="..." class="img-circle"></div>
  <div class="col-md-4 text-right"><img src="..." alt="..." class="img-circle"></div>
</div>

CSS

なし

表示結果

Bootstrapの表現力

さらに丸い画像を四角く、額縁風に変えましょう。

HTML:3-3

<div class="row">
  <div class="col-md-4"><img src="..." alt="..." class="img-thumbnail"></div>
  <div class="col-md-4 text-center"><img src="..." alt="..." class="img-thumbnail"></div>
  <div class="col-md-4 text-right"><img src="..." alt="..." class="img-thumbnail"></div>
</div>

CSS

なし

表示結果

imgタグのclassを変更しただけ、ということにお気づきでしょうか？
これなら作った人に戻す必要もなさそうです。 簡単でしたね。

ちょっとかっこいいサイトを作れる、ノンデザイナーに優しいBootstrap

公式ページのHTMLをコピーするだけで形ができてしまいました。よく使うパーツが集まっているため、大体のレイアウトは実現できます。
特にフォームは、殆どのパーツがそろっています。これらは通常のCSSでもデザインの変更に手間がかかるので、大いに工期短縮が見込めます。

Bootstrapの場合、HTMLの書き方はすべて決まっています。
つまり、部品を組み合わせていけば正しいHTML構造で、書くことができるということなのです。
サイトを構築するにあたって問題のなるのが各ブラウザでのチェック。
CSSが思い通りに動かず、ブラウザAのバージョンXで崩れてしまう、ということが多々あります。
Bootstrapはこれらの表示崩れも吸収してくれます。
多少の差異はあるものの、指定の通りHTMLを組み立てていけば崩れる心配もありません。

Internet Explorer8以下、Firefox 3.6以下は対象外ですが、古いブラウザのシェアはどんどん下がっています。
昨今の殆どのプロジェクトで問題なく使用できるといえるでしょう。

また、スクラッチ開発ではHTML構造が統一しにくいという問題があります。

複数人でHTMLコーディングを進めていく場合、コーディングするメンバーによってHTML構造が異なるのが現状です。
メンバーのスキル、それから好みも加わると出来上がるHTMLは千差万別。
HTMLの雛形やコーディングルールを定めても、吸収できない部分は必ず出てきます。
HTML構造が揃っていないと、保守に手間取ったりプログラムが上手く動かなかったり……
HTML構築後も苦しむことになる頭の痛い問題ですね。

このような場合にもBootstrapは威力を発揮します。
スクラッチ開発よりはるかに低い学習コストで「正しく」「統一された」HTMLを量産することができるのです。

デフォルトで用意されているボタンデザインの例

かっこいい独自サイトを作らせてくれない、デザイナーに厳しいBootstrap

さて、こんな便利なBootstrapにも弱点はあります。

先にレイアウトの変更例をご紹介した際にCSS変更はなしと言いましたが、CSSの知識が皆無というわけにはいきません。
どうして必要になるのでしょう？
Bootstrapを使わないパーツを組み込んだ場合、他パーツに馴染むようにCSSで装飾を施さなければなりません。
美しく出来ている分、記述も多いのです。
追加したパーツにも同様のデザインを施すとなると……
お客様の要件は様々。いかに豊富に揃うBootstrapとはいえ、すべてをカバーできるわけではありません。

また、しっかりとデザインを組み込んでいるがために、まったく違うデザインに変更しようとした場合、たくさんの記述が必要になります。
色や形を変えてもなかなか「Bootstrap風」を消すのは至難の業。
少しカスタマイズをしたところで「おや、このデザインはどこかで見たことがあるぞ？」というサイトの出来上がり。
デザインに拘るページの場合、Bootstrapを使った結果より時間がかかってしまったということもあるかもしれません。

Bootstrapの特長まとめ

Bootstrapを使うか否かは、作りたいサイトのデザイン次第

さて、あなたの業務にBootstrapを導入すべきでしょうか？ひょっとしてスクラッチ開発の方が手っ取り早いかもしれませんよ？
全てを解決とはいきませんが、条件さえ合致すれば工期短縮の強い味方となるでしょう。
デメリットもあることを忘れずにご検討ください。