初心者でもWebデザインできるBootstrapとは!

Bootstrap

Room8社長鶴田です。

みなさんBootstrapって知ってますか?

今回、いろいろ理由がありWebサイトをリニューアルしました。

そこで知ったのがBootstrapです。

今まで使っていたテーマや今回リニューアルで使ったテーマでこのBootstrapが組み込まれていたのですが、よくわからず利用していました。

前回Webサイトを構築しているときにテーマのCSSを見て、カスタマイズしやすいように設計されてるななんて感じていました。
こんかい、テーマを変えたのにも関わらず同じ設計がしてあって調べたらBootstrapであることを知りました。

初めからこれを知ってたら、作業が捗っただろうなぁって思いました。

Bootstrapでできること!

Bootstrapとは、CSSである程度簡単にデザインができてしまうCSSフレームワークの事をいいます。

元々はTwitterが開発したもので「Twitter Bootstrap」と呼ばれていたようです。
より簡単により素早くデザインできるように考えて作られたものですね。

フレームワークですのでいろいろな機能がありますが、僕が利用して感じた大きな特徴として以下の3つです。

レスポンシブデザインの容易さ

今まではレスポンシブその都度頭を悩ませていました。

それがBootstrapを利用することで一気に解決しました。
Bootstrapの仕様を念頭においてデザインを考えると、コーディングがかなり楽になります。

その中でもとくに便利なのがグリットシステム

文章で説明するのが難しいですが、Bootstrapには画面(ブラウザ)の横幅12分割するグリッドがあります。

  • 12=横幅100%
  • 6=横幅50%
  • 3=横幅25%

こんなイメージです。
画面の幅に選び、グリッド数を選ぶだけでいいのです。

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サイトを構築できるようになるとても便利なものです。

まだ使ったことのない人は是非使ってみてください。

詳しくはこちらを参照!

Bootstrap3日本語リファレンス

Follow me!

この記事を書いた人

鶴田 賢太
鶴田 賢太代表取締役
調子に乗って幹部候補だと言われ就職するも、パソコンに興味を持ち弄ってばかり、これからはITの時代だ!なんて、会社を辞め職業訓練校に通い基礎を学び、某上場企業富○通で働く、そこも5年ぐらいで退職しベンチャーの立ち上げに参加、その後外資系保険に転職するも3年で退職し、FP事務所を立ち上げ起業
それと同時ぐらいに、コワーキングスペースに魅了され2014年コワーキングスペースを立ち上げ。2015年に一般社団法人春日井起業支援センターを設立し、2016年にはRoom8法人化し社長に!
現在、コワーキングスペースのメンバー向けに、ビジネスモデルの構築や収益化のサポートを行っている
起業家にオススメ!!名古屋コワーキングスペースおすすめ5+15選-2016年版

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA