基本

Bootstrapとは何か?使用するための準備、基本のグリッドシステムなどの説明。

Bootstrapとは?

Bootstrapは最も有名なCSSフレームワークです。
以前は「Twitter Bootstrap」と呼ばれておりTwitter社が開発・提供していました。CSSを指定するだけでサイトをある程度形にできる素材集、ライブラリ集のようなものです。
現在は主な開発者がTwitter退社したため「Bootstrap」に名称を変更した様です。 Bootstrapを利用するにはHTMLとCSSの知識は必要ですが、それが分かれば誰でもそれなりの見栄えのサイトを作ることが出来ます。

他にも有名なCSSフレームワークとしてFoundationやYahooが公開しているPureなどもありますが、Bootstrapが現状一番多く無料のテーマやテンプレート、日本語での解説ページ、書籍などがあるので一番始めやすいCSSフレームワークだと思います。

Bootstrap3の特長

モバイルファースト、レスポンシブデザイン

Bootstrap3に関してはモバイルファースト、レスポンシブデザインで開発されています。
また、フラットデザインが採用されています。Bootstrap2は使用したことがありませんがこちらが一番大きな変化のようです。

レスポンシブサイト対応のグリッドシステム

横幅を12に分割し、合計12になるようにスタイルを指定するだけでサイトの枠組みを構築していけます。
※個人的にはこれが使いたいから始めました。

豊富に用意されたCSSやコンポーネントやJavaScript

タグやクラスを指定するだけでデザインされたボタンやテーブルを利用できるCSS。
ナビゲーションやパンくずリストなどが用意されたコンポーネント。
簡単にスライドショーが利用できるカルーセルなどのJavaScript。
などサイトを作成するのに十分な機能が用意されています。

LESSやSassのデータも用意されている

私はまだ勉強不足で利用していませんがLESSやSassのデータも公式で用意されているので知識があれば基のファイルを自分でカスタマイズすることが可能

無料の(有料も)テーマが豊富

無料でもサイトのテーマが豊富に配布されているので自分で新たにスタイルを書かなくともイメージに近いサイトが作れるかも

充実した公式サイト

英語ができるなら公式サイトにほとんど説明があるのでそちらを見るのが一番。
こんなサイトいらないのさ、本当はきっと、、、さあ早く下のリンクから飛び立つのさ

Bootstrapの気になる点

Bootstrapのデメリットとまでは言わないですが少し気になる点を挙げておきます。

使用者が多いので既視感を与える可能性

最初から用意された色をそのまま利用した場合や個人的に一番の特徴だと思うのはグローバルナビ。とても便利ですが小さな画面で見た時の四角い角丸付きのハンバーガーメニューを見るとこれはBootstrap利用サイトかなと思ってしまいます。
制作者以外の感覚で言うと見たことあるようなデザインと言うことになるので、気になる場合はBootstrapの機能を利用しながらもカスタマイズし作成するくらいの気持ちでいると良いと思います。

憶えないと使えない部分が多い

用意されている物が多い分、色々使いこなそうとするとクラス名などを多く憶えないといけないです。
ただ、これは他のものでも同様なので最初から全て憶えて使おうと思わず基本を押さえたらあとは公式サイトなどを参照しながら徐々に憶えていけば良いと思います。

微妙に使いづらいメニュー

スマホなどでサイトを見た際にメニューを広げるとメニュー外をクリックしても閉じない点が個人的に少し使い勝手が悪い気がしています。他にも便利だけどかゆいところに手が少し届かないような感覚の部分があります。
使い勝手が悪いと思ったら気持ちを切り替えて標準で用意さている物を無理に使用しようとせず、柔軟に他の方法を利用するなどの対応をとるのが良いと思います。
.dropdown-backdropがiOSではz-indexが複雑で使用できないな内容が公式にあるのでその影響かもしれません。

開発スピードと互換性

開発スピードは早くバージョンは日々アップされています。開発スピードが早いのは良いことですが、バージョンアップした際に互換性があるとは限らないので単純に新しいデータに差し替えても良いとは限らないのでその点は注意が必要かと思います。

バーションアップの変更点は下記の公式のブログで確認できます。
※既にBootstrap4の開発も進んでいるようでIE8のサポートはしないようなことを書いてますね。。。