Bootstrap 5.0
Contents
今日は、フレームワーク Bootstrapについて少しご紹介したいと思います。
WordPress並みにとっても便利ですが、HTMLやCSSを知らないと敷居が高く感じてしまうかもしれません。
しかしながら、一度解ってしまうと、手放せなくなる程、便利です。
なぜなら Bootstrapは、シンプルなデザインでしっかりとした印象のウェブサイトを作るのが得意です。
それでもって 最初からレスポンシブ仕様なので、レスポンシブにわざわざする必要がないのです。
Version5
Bootstrapは、もはやバージョン5になっています。わたしが使い始めた頃からは7年ぐらい経っています。
デスクトップ用もモバイル用も全てきちんとしたグリッドが設計されているので、数ある中から好きなものを使って、サイトを作ることが可能です。
グリッドの種類はいくつかに分けられています。たくさんあって複雑だなと思われるかもしれませんが、基本的にはそんなに難しく考える必要はありません。
実際に、ひとつかふたつ取りあげて見てみましょう!
Bootstrapのグリッドシステム
それではそのグリッドシステムについて、見ていきましょう。
他のテンプレートでも大きいところであれば、グリッドシステムが使われていますよね。
Bootstrapがその代表なのではないでしょうか。
Bootstrapをダウンロードすると、フォルダの中に Gridというフォルダがあります。
それを開くとBootstrapで使うグリッドシステムが表示されます。
公式ドキュメントはこちら →
Container(コンテナ)
Bootstrap v4.4で追加された新しいクラスにより、特定のブレークポイントまで
100%幅のコンテナーが許可されます。
Version5では新しいxxlブレークポイントを追加します。
5つのグリッド層
Bootstrapグリッドシステムには、5つの層があって、サポートするデバイスの範囲ごとに1つと設定されて出来ています。
各層は最小ビューポートサイズから始まり、オーバーライドされない限り、より大きなデバイスに自動的に適用されます。

まとめ
Bootstrapの構造は、フレームワークでグリッドシステム。
無料で使えるホームページのテンプレートみたいなもの。
デザインが出来なくてもそれなりに出来上がったものを利用して
プロフェッショナルなサイトが作れるのでとっても便利!