Bootstrapの導入方法と特徴

こんにちは。

最近Bootstrapを勉強し始めたので、自分の頭の整理のためにも書いていこうと思います。

1.Bootstrapとは

Twitter社が開発したWebフレームワークで、楽に見栄えの良いWebページを作ることができます。
Bootstrapを使用することによりコーディングの時間が短縮できます。

デメリットとしてはだれが作っても同じような単調なページになってしまいます。
とはいえ、そこはWebデザイナーやコーダーの腕の見せ所でいくらでもなんとかなると思います。
こんなWebページが作れますので、デザインやコーディングのやり方によっては十分美しいWebページが作れます。

templatemag.com

2.Bootstrapの導入方法

Bootstrapの導入方法はとても簡単です。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

上記のコードをhtmlファイルのの前に挿入します。
これだけでOK。

3.Bootstrapで何ができる？

Bootstrapは様々なことができますが、私が便利だと思う代表的な２つの使い方について説明します。

3.1グリッドシステム

画面を縦に12分割して、グリッドをクラス名に指定することで画面上に画像やテキストなどを配置させることが出来ます。
これによって、CSSでちまちまマージンやパディングを指定してオブジェクトの配置を設定する手間が省けます。

3.2簡単にwebに動きをつける

bootstrapではすでにJavascriptのパッケージが用意されているため、html上にコードを記載するだけwebに動きをつけることが出来ます。
例えば、よく使うハンバーガーメニューやアコーディオンメニュー、スライドショーなどがbootstrapを使えば素早く実装できます。

4.まとめ

今回は簡単にbootstrapの紹介を書きました。次回からはもっと具体的な使い方について書いていきたいと思います。