コワーキングスペース 代表 鶴田 賢太 Room8社長鶴田です。
みなさんBootstrapって知ってますか？
今回、いろいろ理由がありWebサイトをリニューアルしました。
そこで知ったのがBootstrapです。
今まで使っていたテーマや今回リニューアルで使ったテーマでこのBootstrapが組み込まれていたのですが、よくわからず利用していました。
前回Webサイトを構築しているときにテーマのCSSを見て、カスタマイズしやすいように設計されてるななんて感じていました。
こんかい、テーマを変えたのにも関わらず同じ設計がしてあって調べたらBootstrapであることを知りました。
初めからこれを知ってたら、作業が捗っただろうなぁって思いました。
Bootstrapでできること！
Bootstrapとは、CSSである程度簡単にデザインができてしまうCSSフレームワークの事をいいます。
元々はTwitterが開発したもので「Twitter Bootstrap」と呼ばれていたようです。
より簡単により素早くデザインできるように考えて作られたものですね。
フレームワークですのでいろいろな機能がありますが、僕が利用して感じた大きな特徴として以下の３つです。
レスポンシブデザインの容易さ
今まではレスポンシブその都度頭を悩ませていました。
それがBootstrapを利用することで一気に解決しました。
Bootstrapの仕様を念頭においてデザインを考えると、コーディングがかなり楽になります。
その中でもとくに便利なのがグリットシステム
文章で説明するのが難しいですが、Bootstrapには画面（ブラウザ）の横幅１２分割するグリッドがあります。
- １２＝横幅１００％
- ６＝横幅５０％
- ３＝横幅２５％
こんなイメージです。
画面の幅に選び、グリッド数を選ぶだけでいいのです。
CSSなので、classで指定します。
col-[画面サイズ]-[グリッド数]という感じで指定します。
- lg = 1200px以上（デスクトップサイズ）
- md = 992px〜1199px（デスクトップサイズ）
- sm = 768px〜991px（タブレットサイズ）
- xl = 768px未満（スマホサイズ）
画面の幅がlarge（1200px以上）の時、6グリッド利用（幅50％）にしたい場合こんな感じです。
<div class=”col-lg-6″>テスト</div>
実際にこんな感じに指定してみます。
<div class=”col-lg-6″>テスト</div>
<div class=”col-lg-6″>テスト</div>
<div class=”col-lg-6″>テスト</div>
<div class=”col-lg-6″>テスト</div>
こんな感じに表示されます。
画面の幅が1200px以上の人は、横に二列・縦に二列に並びます。。
これを画面の幅が1200px以下のスマホで見ると全て縦に並びます。
続いてこの様に記述するとどうなるでしょうか？
<div class=”col-lg-3″>テスト</div>
<div class=”col-lg-3″>テスト</div>
<div class=”col-lg-3″>テスト</div>
<div class=”col-lg-3″>テスト</div>
画面の幅が1200px以上の人は、全て横一列に並びます。
最後に
今回はほんの一部だけをご紹介しましたが。
こう言った機能が詰め込まれたものがBootstrapです。
他にもボタンやカラーなど変更する事とができますし、簡単にスライドショーが作れる機能などもあります。
先にデザインありきで考えると使いにくい部分もありますが、あらかじめBootstrapを考慮してデザインするとかなりの時短できます。
ベテランの人がマスターすればかなりの作業効率アップが見込めますし、まだ初心者でも比較的簡単にWebサイトを構築できるようになるとても便利なものです。
まだ使ったことのない人は是非使ってみてください。
詳しくはこちらを参照！