yamata.programmer.blog

28歳 プログラマになるために通った道に落ちていた情報を発信します!

【駆け出しのwebデザイナー必見】筆者がBootstrapに出会った話

この記事を読んで欲しい方

今回はプログラミングスクールの勉強をしていて、Bootstrapの項目まで行って、これスゲー!って思ったので解説していこうと思います。

Bootstrapって何なの?

まずBootstrapは、Twitter社が作成したオープンソースで誰でも無料で利用できる、WEB制作をする人の為のCSSJavascriptをまとめたファイルです。

よく使われるデザインを予め定義してあるので、その定義した設定を覚えているだけで、CSSJavascriptの設定が必要ではなくなります。

Bootstrapを使うメリット

初心者向きの設計

上述した通り、Bootstrapがあればほぼ自分でcssの設計が必要なくなるので、(本当はcssをしっかり理解した上で時間短縮の為に使うべきですが)最悪はデザインの知識がなくてもWEBサイトを構築する事が可能です。

レスポンシブデザインの実現が可能

レスポンシブデザインは、閲覧している端末の画面の大きさによってwebサイトのデザインを変える仕組みです。これを使うと、PCサイト、スマホサイトでデザインの変更の必要がなくなります。内容を変えずに済むという事ですね。

プラグイン、テンプレートが豊富

プラグインは、アプリケーションを拡張させる為のソフトウェアです。
Bootstrapのプラグインは、カレンダー、カラーピッカー、デートピッカー、イメージギャラリー等、本当にキリがないくらいあります。

自分で作成したcssと併用ができる

まあ当然ですが、自分で作成したcssとの併用は可能となっています。
ただしこの時に、idとclassがBootstrapで使っているものと被らないようにしましょう。
また、Bootstrapで書かれているコードを書くと二度手間になるので、しっかりBootstrapで使われている機能を理解しましょう。

Bootstrapを使うデメリット

別のサイトでも似たようなデザインになりやすい

オープンソースで誰でも利用できるフレームワークなので、どうしてもデザインが似通ってしまうのは仕方のない事です。
独自性のデザインを作成したい場合は、オープンソースの方を編集したり、自分でcssJavascriptの編集をした方が良さそうです。

カスタマイズを極めていくと、逆に時間がかかってしまう

Bootstrap自体の機能しか使わない分には、自分自身でCSSを作る必要はないので、相当な時間短縮でクオリティの高いWEBサイトのデザインをする事が出来ます。が、これすげーこれすげーとどんどんカスタマイズを重ねていく事によって時間を逆にとられてしまいます。
時間が取れない人は、カスタマイズは程々にしましょう。

 

Bootstrapの機能の一部

グリッドシステム

グリッドシステムは、画面幅に合わせてコンテンツの幅と数を制御できるシステムです。

PCのフルサイズの画面で見ると横並びにコンテンツが表示させていても、スマホの画面だと縦並びに表示させる事ができます。

この横並びのコンテンツを

f:id:yamata214:20200517144851p:plain

画面幅を小さくする事によって縦並びにする事ができます。

f:id:yamata214:20200517145255p:plain

見やすいテーブル

htmlで作るテーブルよりも、断然に見やすいテーブルを作成する事ができます。

f:id:yamata214:20200517145914p:plain

テーブルの内容は適当に持ってきました。非常に見やすいですね。

f:id:yamata214:20200517150139p:plain

何故かマウスポインタが出てこないですが、原宿の行にマウスを載せてあります。

比較してもみづらいと思いますが、マウスを乗せると色を変えることも簡単にできます。

Bootstrapを使ってwebサイトの拡張性を上げていこう!

いかがでしたでしょうか。

名前は以前より聞いた事がありましたが、まさかここまで時間短縮をできてデザインが楽になる、こんな機能があるとは思っていませんでした。

自分も未熟なので勿論ですが、皆さんもぜひ勉強してみてください。