プログラミング入門ナビ- Part 62

CSSフレームワーク Bootstrap（ブートストラップ）とは

2018-03-04 By プログラミング入門ナビ編集部

Web開発のフロントエンド開発を効率良く行う事ができる、Bootstrap(ブートストラップ)とは何かについて、プログラミング初心者向けに説明します。

Bootstrapとは

フロントエンド開発を効率よく行うためのフロントエンドフレームワークです。
レスポンシブ対応のWebサイトのレイアウトを、簡単に素早くできることから、CSSフレームワークとも呼ばれることもあります。
よく使うレイアウトやUIコンポーネントが用意されていて、簡単に使うことができます。
レイアウトはGridシステムを用います。
HTML,CSS,JavaScriptで制作されています。
無償で使うことができます。
もともとはTwitter bootstrapと呼ばれていて、Twitterのサイト構築に利用されていました。

Bootstrapについて動画で学習する

Gridシステムとは

レイアウトを格子状に分解して配置するデザイン手法のことです。
コンテナ、行、および列を使用してコンテンツをレイアウトし、整列します。
画面サイズによっても、レイアウトが変わり、画面サイズが異なるデバスイスでも、いい感じに表示することができるのが特徴です。

Bootstrapの公式サイト

Bootstrapの公式サイトは、下記になります。
Bootstrap

インストール方法やドキュメントなどの情報が掲載されています（英語）

ライセンス

ライセンスはMITライセンスとなっているので、比較的使いやすいです。

このソフトウェアを誰でも無償で無制限に扱って良い。ただし、著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。
作者または著作権者は、ソフトウェアに関してなんら責任を負わない。

出典：「MIT License」（2016年6月27日 (月) 13:20 UTCの版）『ウィキペディア日本語版』。

なぜBootstrapを使うのか

開発スピードを上げるためのコスト削減のためです。

開発スピード

現在ビジネスのスピードが早くなってきていて、Webサービスの開発の現場は、スピードが重視されます。
すでに、用意されているレイアウトや、UIコンポーネントなどを利用することで、素早くアイデアのプロトタイプを作成したり、アプリケーション全体を構築できます。

コスト削減

予算が潤沢にあるプロジェクトであれば問題ないのですが、Webサービスの立ち上げ時は予算に制約があることが多いと思います。
そんなときに、デザイナーをアサインしなくても、一定以上のレベルでしかも素早く見た目を整えることができるので、デザイナーとエンジニアのコスト（人件費・外注費）を抑えることができます。
特に、運理で使う管理画面など、デザイン性がそこそこのレベルで良い画面は、Bootstrapを使用することがとても多いです。

メリット / デメリット

メリット

素早くアイデアのプロトタイプを形にする。
素早くアプリケーション全体を構築できる。

プロジェクト立ち上げの1人や1人での開発体制とリソースが限られ、さらに、短時間で開発する必要があって、デザイナーもアサインされていない、みたいなときに、とても便利です。

デメリット

良くも悪くもテンプレートなので、似たようなデザインのサイトになりがち(?)

ただし、このサイトはブートストラップっぽいデザインだなぁとかと気にするのは、WebエンジニアとかWebデザイナーといった、Web業界の制作に関わる一部の人だけなけなので、過剰に心配する必要は無いでしょう。

対応ブラウザ

記事執筆時点ではBootstrap 4が最新のバージョンです。

Chrome, Firefox, Safari,Microsoft Edge といったブラウザの最新バージョンであれば大抵対応しています。
注意点としては、Internet Explorerは、IE10以上の点です。言い換えるとIE9以下はサポート外で、旧バージョンのBootstrap 3を利用する必要があります。
最近のプロジェクトであれば、IE9をサポート対象にすることは少なくなってきましたが、注意しましょう。

参照 : Browsers and devices | Bootstrap