WordPressのライバル!?Bootstrapで簡単にホームページを作ってみよう
Bootstrap 5.0
Contents
今日は、フレームワーク Bootstrapについて少しご紹介したいと思います。
WordPress並みにとっても便利ですが、HTMLやCSSを知らないと敷居が高く感じてしまうかもしれません。
しかしながら、一度解ってしまうと、手放せなくなる程、便利です。
なぜなら Bootstrapは、シンプルなデザインでしっかりとした印象のウェブサイトを作るのが得意です。
それでもって 最初からレスポンシブ仕様なので、レスポンシブにわざわざする必要がないのです。
Version５
Bootstrapは、もはやバージョン５になっています。わたしが使い始めた頃からは７年ぐらい経っています。
デスクトップ用もモバイル用も全てきちんとしたグリッドが設計されているので、数ある中から好きなものを使って、サイトを作ることが可能です。
グリッドの種類はいくつかに分けられています。たくさんあって複雑だなと思われるかもしれませんが、基本的にはそんなに難しく考える必要はありません。
実際に、ひとつかふたつ取りあげて見てみましょう！
Bootstrapのグリッドシステム
それではそのグリッドシステムについて、見ていきましょう。
他のテンプレートでも大きいところであれば、グリッドシステムが使われていますよね。
Bootstrapがその代表なのではないでしょうか。
Bootstrapをダウンロードすると、フォルダの中に Gridというフォルダがあります。
それを開くとBootstrapで使うグリッドシステムが表示されます。
公式ドキュメントはこちら →
Container（コンテナ）
Bootstrap v4.4で追加された新しいクラスにより、特定のブレークポイントまで
１００％幅のコンテナーが許可されます。
Version５では新しいxxlブレークポイントを追加します。
-
Containersはページ内のメインで使われるグリッドで、ほぼ全てのサイトに出てきます。
モバイルでみた時 
デスクトップPCで見た時
５つのグリッド層
Bootstrapグリッドシステムには、５つの層があって、サポートするデバイスの範囲ごとに１つと設定されて出来ています。
各層は最小ビューポートサイズから始まり、オーバーライドされない限り、より大きなデバイスに自動的に適用されます。
-
Five Grid Tiers
テーブルタグでも出てくる col : 列 を数値で括ってグリッドシステムとして使っています。
これは覚える必要ありませんが、書き方は理解しておいた方がいいです。
デスクトップPCで見た時 
Find Your Best Bootstrap
Bootstrapをダウンロードすると約２５種類のテンプレートがついてきます。
ThemifyのAddon並みです。カッコいいです！
たくさんあるので迷ってしまいますが、以下の３つはWordPressが使える方なら、少し勉強すれば使いこなせるようになれます。
それでも、んー。Bootstrapむずい・・・！ と思われるのであれば、やっぱり
ドラッグ＆ドロップのThemifyがオススメです！
Product
Album
Blog
まとめ
Bootstrapの構造は、フレームワークでグリッドシステム。 
無料で使えるホームページのテンプレートみたいなもの。
デザインが出来なくてもそれなりに出来上がったものを利用して
プロフェッショナルなサイトが作れるのでとっても便利！
