最新記事を公開しました→ 詳しくはこちら

Bootstrapの学習手順

「Bootstrapは学んだほうがいいの?」という質問をいただくことがあります。

結論、「学ばなくていい」と僕は考えています。
理由としては、実案件で使用したことが一度もなかったからです。
また、周囲のフリーランス仲間でも実案件での使用経験がある人がほぼいないです。


それならなぜ記事にするのか?という理由は

  • まれに実案件で使用を指定された場合に学習するため
  • 筆者自身がWEB制作の学習の一環として学んだ経験がある
  • ライブラリ自体は便利なので、知識として持っておいても損はない
  • WEB制作学習ロードマップの合間の息抜きで学べるほどの分量


という理由で記事にしました。
必要な方はご覧ください。

それでは始めていきましょう!

Bootstrapとは?

Bootstrapは、WEBフレームワークです。

WEBフレームワークとは、
Web制作で使うパーツやレイアウトのHTML/CSS/Javascriptがまとまったライブラリのことを言います。

CSS(見た目の調整)やJavaScript(動きをつける)がまとまってライブラリとなっており、
制作段階の「手間」を大幅に省くことができるスグレモノなのです。

またBootstrapはレスポンシブ対応をしています。
そのため、PCでもスマートフォンでも1つのサイトで対応できます。

用意されているCSSを使うだけで、
デザインに自信がない人でも洗練されたデザインのサイトを作ることができます。

Bootstrapの使い方

Bootstrapの使い方はとても簡単。3ステップだけです。

  1. 公式サイトからCSSやJavascriptなどのソースファイルをダウンロード
あわせて読みたい
Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to lif...
  1. 差し込みたいサイトのHTMLファイルへ差し込む
  2. HTMLの各要素にBootstrapのclassを指定

これで以上です。

classを指定すれば、
目的に合ったデザインをシンプルかつ、バランスよく作ることができます。

1から検証しながらのデザイン制作は時間も労力もかかるため、負担が大きいです。
しかし、
Bootstrapのグリッドシステムを活用すれば負担を軽減できるうえにレスポンシブ対応の検証時間も大幅に短くできます。

また、
「多くの情報を提供できる」「サイト全体の統一感を計れる」といった効果も期待できます。

Bootstrapの概要を学べる動画

こちらのYou TubeではBootstrapを使った場合の「手軽さ」が紹介されています。
参考までにご覧ください。

上記の動画を閲覧後、
実際にコピペでも良いのでコードを書いてみて、表示を確認してみましょう。

まとめ

実案件で使う機会はほぼないBootstrapですが、
便利なライブラリであることは間違いありません。

もし必要な機会があれば学んでみましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次