【Bootstrap】Bootstrapとは?メリット・デメリット

どうも、とがみんです。

Webサイトを制作する際に、Bootstrapというものを作成したことはあるでしょうか。

CSSでWebページの見栄えを整えたりするかと思いますが、

この記事では、それを圧倒的に効率化するためのBootstrapについて紹介します。

Contents

Bootstrapとは？

「Bootstrap」とは、Twitter社が開発したCSSのフレームワークで、これを利用すれば、簡単に整ったデザインのページを作成することができます。

通常は全てのスタイルを自分で作っていく必要がありますが、Bootstrapにはあらかじめ様々なスタイルが用意されているので、ルールに沿って利用するだけで、整ったデザインのページを作成することができます。

Bootstrapを使用すれば、様々なデザインを簡単に実装することができます。以下にいくつか例を紹介します。

グリッドシステムは、レイアウトを格子状に分割して配置するデザイン手法で、ブラウザの表示サイズに合わせて、そのデザインを変更することができます。

【Bootstrap】
グリッドシステム pic.twitter.com/kFNsm4BF3w
— 究極の自由を追求するブログFresopiya (@fresopiya) June 7, 2019

以下のようなナビゲーションバーが簡単に作成できます。

【Bootstrap】
ナビゲーションバー pic.twitter.com/D8FNSTCDx7
— 究極の自由を追求するブログFresopiya (@fresopiya) June 7, 2019

スライドショーも簡単に作成できます。

【Bootstrap】
スライドショー pic.twitter.com/hXmpXtv5Aq
— 究極の自由を追求するブログFresopiya (@fresopiya) June 7, 2019

他にも、階層リンクナビゲーション、ダイアログボックス、ボタン、テーブル、フォーム、アラート等様々なものが用意されています。

Bootstrapのドキュメントにたくさんまとめられています。

また、以下のYouTubeの動画は、Bootstrapを利用して作られたサイトです。

簡単に綺麗なページを作成することができる。

Webだけでなく、スマホにも対応したデザインを簡単に作成することができる。

デザインに疎くても、それなりのデザインを

デザインとコーディングの工数を短縮することができる。

Bootstrapの記法を習得する必要がある。

デザインが画一的になりがち。

Bootstrapについて紹介しました。便利なものがたくさん用意されているので、うまく使っていきたいですね(笑)。

個人的にグリッドシステムが最高。