プログラミングをはじめた頃に耳にするBootstrap。
Bootstrapって聞いたことあるけど一体なんなの？
あると便利って聞くけど何が便利なの？
という方のために
Bootstrapとはなんなのか。初心者の視点で深堀していきます。
Contents
Bootstrapとは
Bootstarapとは、フロントエンド開発を効率よく行うためのフレームワークです。（補足：フロントエンドというのはみなさんが普段ネットを見て映し出されている部分のことです。）
元々はツイッターのサイトを構築するために開発されたフレームワークなんです。
よく使うレイアウトなどが用意されていて、レスポンシブ対応のWebサイトを簡単に作ることができます。
レスポンシブ対応というのは、何かと言うと、
パソコンとスマホでは画面サイズ違いますよね？
この画面のサイズの違いでレイアウトが崩れることがあるんです。
パソコンでは見やすけど、スマホだと見にくいだとか。。。
このレイアウトを柔軟に調整することをレスポンシブ対応といいます。
以上の動画を見ていただくとわかりますが、画面サイズを変えると、それに合わしてレイアウトも変わりますよね？
Bootstrapを使えば、以上のようなレスポンシブ対応のサイトを簡単に作れるようになります。
また、Bootstrapはレスポンシブ対応のWebサイトを簡単に作ることができることからCSSフレームワークとも言われます。
以下がBootstrapのホームページです。
なぜBootstrapが人気でよく使われるのか？
一般的にビジネスは、スピードが重視されます。
IT業界も一緒で、webサービスの開発スピードが重視されています。
Bootstrapを使えば、予算をあまりかけたくないプロジェクトの時などに、webサービスを立ち上げるのに、デザイナーを外注しなくても一定以上のレベルで素早く見た目を整えることができます。
早いということはコスト削減にも繋がります。
しかもBootstrapは無償なので、さらにコスト削減に繋がるのですね。
こうなってくるとwebデザイナーという仕事は将来的にどうなっていくのかなーとも思いますよね。。。
Bootstrapを使うデメリット
正直あまりないです。
強いて言えば、Bootstrapはテンプレートなので、他のサイトと似たようなデザインになってしまうように見えるということぐらいですかね。。。
とはいえ、
Bootstrapっぽいデザインだとかそんなこと気にするのは、プログラマーなどweb製作に関わる人たちだけです。
だから何も気にすることはないかと。
他の業界でもこういうことは結構起きています。
以前、僕は家具業界で働いていた（今も多少関わっていますが）のですが、
ニトリのソファのCMで、木目を互い違いに重ねることで強度を増したという謳い文句のCMがあったのをご存知の方もいますか？
スライスした木材を木目を互い違いして重ねたものを積層合板と言います。
この積層合板ってホームセンターなどに売っていたりするもので、特に目新しいものでもなくて家具屋とか大工からしたら昔からある普通のものなんです。
でも職人気質の彼らはこのニトリのCMに対して、「何も画期的じゃないじゃん」「普通のことをいちいち言うな」など批判的な目で見ている人が結構いました。
でもこれって一般の人たちからしたら目新しいし、普通は知らないことなんですよ。
だからこのニトリのCMを作った人たちは、頭の固い彼らよりも消費者のことをよくわかっているのですよ。。。
話は逸れましたが、
Bootstrapは、特に目立ったデメリットはないよ〜ということです。
Bootstrapおすすめ学習サイト
今回、Bootstrapの導入の方法を解説しようかと思ったのですが、学習サイトを見て、実際に手を動かしもらえば自ずと導入はできると思うので、省きました。
では以下に僕が実際に使ったおすすめ学習サイトを紹介しますね。
ドットインストール
Bootstrap 3.0入門
https://dotinstall.com/lessons/basic_twitter_bootstrap_v4
Bootstrap 4.0入門
https://dotinstall.com/lessons/basic_twitter_bootstrap_v5
どちらをやってもらっても構わないのですが、Bootstrap 4.0入門の方が最新ですし、レスポンシブ対応した簡単なサイトが作れますのでおすすめかなと思います。
どちらも無料ですので気軽に挑戦してみてください。こんなに優良なものが無料で見れるなんて良い時代ですね。
Udemy
ほとんどの動画が有料ですが、購入は１回きりです。よくセールもやっていますので、その時購入しておくのがオススメです。
Bootstrap以外のプログラミングの基礎知識も学べますよ。
コースのレベルが合わなかったりすれば、全額返金の保証もしているので安心です。
Q&A形式で講師が指導してくれのも魅力的です。
Youtubeでの学習
まだまだ日本語のサイトは少ないのですが、最近ではYoutubeでも学習できます。
ビシネスLPサイトが作れるようになります！
英語を聞き取れなくて、コードの内容は理解できるようになるかなと思います。
実際僕も英語は全然できないので。
読んでおいた方が良い記事はこちら
http://websae.net/twitter-bootstrap-grid-system-21060224/
Bootstrap のグリッドシステムについて詳しく書かれた記事です。
レスポンシブデザインを簡単に実現するには、グリッドシステムが欠かせません。
まずはグリッドシステムだけでもマスターするとこと心がけると良いですよ。
Bootstrapに慣れていないベテランコーダーでもグリッドシステムだけは使っていたりしますので。
プログラミングを動画で勉強する際の注意点
動画を見るだけじゃなく手を動かし必ず書くように心がけてください。
動画を見ているだけだといざコーディングしようとしてもできなかったりしますので。
（実体験ですが。。。。）
プログラミング学習は、書いて学ぶことが重要だということは@manabubannaiさんという方の動画で詳しく解説しています。参考にどうぞ。
まとめ
今回はBootstrapとは何かということと、Bootstrapのおすすめ学習サイトを紹介いたしました。
Html、cssの「float」の学習で詰まってしまった方もBootstrapを使えば簡単にレスポンシブデザインのレイアウトが実現できます。
この機会にBootstrapwp習得し、ブログラミングの技術を向上させましょう！
では今日はこの辺で。
