「Bootstrapは学んだほうがいいの？」という質問をいただくことがあります。
結論、「学ばなくていい」と僕は考えています。
理由としては、実案件で使用したことが一度もなかったからです。
また、周囲のフリーランス仲間でも実案件での使用経験がある人がほぼいないです。
それならなぜ記事にするのか？という理由は
- まれに実案件で使用を指定された場合に学習するため
- 筆者自身がWEB制作の学習の一環として学んだ経験がある
- ライブラリ自体は便利なので、知識として持っておいても損はない
- WEB制作学習ロードマップの合間の息抜きで学べるほどの分量
という理由で記事にしました。
必要な方はご覧ください。
それでは始めていきましょう！
Bootstrapとは？
Bootstrapは、WEBフレームワークです。
WEBフレームワークとは、
Web制作で使うパーツやレイアウトのHTML/CSS/Javascriptがまとまったライブラリのことを言います。
CSS（見た目の調整）やJavaScript（動きをつける）がまとまってライブラリとなっており、
制作段階の「手間」を大幅に省くことができるスグレモノなのです。
またBootstrapはレスポンシブ対応をしています。
そのため、PCでもスマートフォンでも1つのサイトで対応できます。
用意されているCSSを使うだけで、
デザインに自信がない人でも洗練されたデザインのサイトを作ることができます。
Bootstrapの使い方
Bootstrapの使い方はとても簡単。３ステップだけです。
- 公式サイトからCSSやJavascriptなどのソースファイルをダウンロード
- 差し込みたいサイトのHTMLファイルへ差し込む
- HTMLの各要素にBootstrapのclassを指定
これで以上です。
classを指定すれば、
目的に合ったデザインをシンプルかつ、バランスよく作ることができます。
１から検証しながらのデザイン制作は時間も労力もかかるため、負担が大きいです。
しかし、
Bootstrapのグリッドシステムを活用すれば負担を軽減できるうえにレスポンシブ対応の検証時間も大幅に短くできます。
また、
「多くの情報を提供できる」「サイト全体の統一感を計れる」といった効果も期待できます。
Bootstrapの概要を学べる動画
こちらのYou TubeではBootstrapを使った場合の「手軽さ」が紹介されています。
参考までにご覧ください。
上記の動画を閲覧後、
実際にコピペでも良いのでコードを書いてみて、表示を確認してみましょう。
まとめ
実案件で使う機会はほぼないBootstrapですが、
便利なライブラリであることは間違いありません。
もし必要な機会があれば学んでみましょう。