この記事を読んで欲しい方
- 駆け出しwebデザイナー
- デザインをするプログラミング初学者
今回はプログラミングスクールの勉強をしていて、Bootstrapの項目まで行って、これスゲー！って思ったので解説していこうと思います。
Bootstrapって何なの？
まずBootstrapは、Twitter社が作成したオープンソースで誰でも無料で利用できる、WEB制作をする人の為のCSSとJavascriptをまとめたファイルです。
よく使われるデザインを予め定義してあるので、その定義した設定を覚えているだけで、CSSやJavascriptの設定が必要ではなくなります。
Bootstrapを使うメリット
初心者向きの設計
上述した通り、Bootstrapがあればほぼ自分でcssの設計が必要なくなるので、（本当はcssをしっかり理解した上で時間短縮の為に使うべきですが）最悪はデザインの知識がなくてもWEBサイトを構築する事が可能です。
レスポンシブデザインの実現が可能
レスポンシブデザインは、閲覧している端末の画面の大きさによってwebサイトのデザインを変える仕組みです。これを使うと、PCサイト、スマホサイトでデザインの変更の必要がなくなります。内容を変えずに済むという事ですね。
プラグイン、テンプレートが豊富
プラグインは、アプリケーションを拡張させる為のソフトウェアです。
Bootstrapのプラグインは、カレンダー、カラーピッカー、デートピッカー、イメージギャラリー等、本当にキリがないくらいあります。
自分で作成したcssと併用ができる
まあ当然ですが、自分で作成したcssとの併用は可能となっています。
ただしこの時に、idとclassがBootstrapで使っているものと被らないようにしましょう。
また、Bootstrapで書かれているコードを書くと二度手間になるので、しっかりBootstrapで使われている機能を理解しましょう。
Bootstrapを使うデメリット
別のサイトでも似たようなデザインになりやすい
オープンソースで誰でも利用できるフレームワークなので、どうしてもデザインが似通ってしまうのは仕方のない事です。
独自性のデザインを作成したい場合は、オープンソースの方を編集したり、自分でcssやJavascriptの編集をした方が良さそうです。
カスタマイズを極めていくと、逆に時間がかかってしまう
Bootstrap自体の機能しか使わない分には、自分自身でCSSを作る必要はないので、相当な時間短縮でクオリティの高いWEBサイトのデザインをする事が出来ます。が、これすげーこれすげーとどんどんカスタマイズを重ねていく事によって時間を逆にとられてしまいます。
時間が取れない人は、カスタマイズは程々にしましょう。
Bootstrapの機能の一部
グリッドシステム
グリッドシステムは、画面幅に合わせてコンテンツの幅と数を制御できるシステムです。
PCのフルサイズの画面で見ると横並びにコンテンツが表示させていても、スマホの画面だと縦並びに表示させる事ができます。
この横並びのコンテンツを
画面幅を小さくする事によって縦並びにする事ができます。
見やすいテーブル
htmlで作るテーブルよりも、断然に見やすいテーブルを作成する事ができます。
テーブルの内容は適当に持ってきました。非常に見やすいですね。
何故かマウスポインタが出てこないですが、原宿の行にマウスを載せてあります。
比較してもみづらいと思いますが、マウスを乗せると色を変えることも簡単にできます。
Bootstrapを使ってwebサイトの拡張性を上げていこう！
いかがでしたでしょうか。
名前は以前より聞いた事がありましたが、まさかここまで時間短縮をできてデザインが楽になる、こんな機能があるとは思っていませんでした。
自分も未熟なので勿論ですが、皆さんもぜひ勉強してみてください。