WordPressのライバル!?Bootstrapで簡単にホームページを作ってみよう

 Bootstrap 5.0

 

今日は、フレームワーク Bootstrapについて少しご紹介したいと思います。

WordPress並みにとっても便利ですが、HTMLやCSSを知らないと敷居が高く感じてしまうかもしれません。

しかしながら、一度解ってしまうと、手放せなくなる程、便利です。

なぜなら Bootstrapは、シンプルなデザインでしっかりとした印象のウェブサイトを作るのが得意です。

それでもって 最初からレスポンシブ仕様なので、レスポンシブにわざわざする必要がないのです。

Version5

Bootstrapは、もはやバージョン5になっています。わたしが使い始めた頃からは7年ぐらい経っています。

デスクトップ用もモバイル用も全てきちんとしたグリッドが設計されているので、数ある中から好きなものを使って、サイトを作ることが可能です。

グリッドの種類はいくつかに分けられています。たくさんあって複雑だなと思われるかもしれませんが、基本的にはそんなに難しく考える必要はありません

実際に、ひとつかふたつ取りあげて見てみましょう!

Bootstrapのグリッドシステム

それではそのグリッドシステムについて、見ていきましょう。

他のテンプレートでも大きいところであれば、グリッドシステムが使われていますよね。

Bootstrapがその代表なのではないでしょうか。

Bootstrapをダウンロードすると、フォルダの中に Gridというフォルダがあります。

それを開くとBootstrapで使うグリッドシステムが表示されます。

公式ドキュメントはこちら →

Container(コンテナ)

Bootstrap v4.4で追加された新しいクラスにより、特定のブレークポイントまで

100%幅のコンテナーが許可されます。

Version5では新しいxxlブレークポイントを追加します。

  • Containersはページ内のメインで使われるグリッドで、ほぼ全てのサイトに出てきます。

     

    モバイルでみた時
    デスクトップPCで見た時

5つのグリッド層

Bootstrapグリッドシステムには、5つの層があって、サポートするデバイスの範囲ごとに1つと設定されて出来ています。

各層は最小ビューポートサイズから始まり、オーバーライドされない限り、より大きなデバイスに自動的に適用されます。

  • Five Grid Tiers 

    テーブルタグでも出てくる col : 列 を数値で括ってグリッドシステムとして使っています。

    これは覚える必要ありませんが、書き方は理解しておいた方がいいです。

    デスクトップPCで見た時

Find Your Best Bootstrap

Bootstrapをダウンロードすると約25種類のテンプレートがついてきます。

ThemifyのAddon並みです。カッコいいです!

たくさんあるので迷ってしまいますが、以下の3つはWordPressが使える方なら、少し勉強すれば使いこなせるようになれます。

それでも、んー。Bootstrapむずい・・・! と思われるのであれば、やっぱり

ドラッグ&ドロップのThemifyがオススメです! 

_e_xmas_tree29_s512_xmas_tree29_0

まとめ

Bootstrapの構造は、フレームワークでグリッドシステム。         

無料で使えるホームページのテンプレートみたいなもの。 

デザインが出来なくてもそれなりに出来上がったものを利用して

プロフェッショナルなサイトが作れるのでとっても便利!

Liked Liked
1 Comment