Bootstrap(ブートストラップ)とは、Webサイト/WebアプリをCSSで開発するためのWebフレームワークです。「レスポンシブデザイン」や「グリッドシステム」などの特徴があります。

オープンソースのフレームワーク/Bootstrapとは

Bootstrap(ブートストラップ)とは、Webサイト/WebアプリをCSSで開発するためのWebフレームワークです。「レスポンシブデザイン」や「グリッドシステム」などの特徴があります。

目次

「Bootstrap」基本情報
■概要
■基本説明
■経緯
・モバイルファーストへの潮流
・「Twitter Bootstrap」→「Bootstrap」

主な特徴
■非CSS専門家でも見栄えの良いサイトデザインに
・「CSS」とは
・CSSに関するハードルの高さ
・BootstrapはCSSを適用するだけ
・非デザイナーでも非エンジニアでもWebサイトを作成できる
■レスポンシブWebデザイン
・レスポンシブとは
・レスポンシブ登場前の状況
・Bootstrapは「レスポンシブWebデザイン」に対応
■グリッドシステム
・「グリッドシステム」とは
・モバイルデバイス基準
■Bootstrapテーマ

Webフレームワーク
■概要
■高速開発
■小規模から大規模のサイト/アプリに対応
■コンポーネント
■jQuery(JavaScriptライブラリ)の使用
・概要
・jQuery(JavaScriptライブラリ)が必要なコンポーネント
■ビルドツール(NPMスクリプト)
■サポートブラウザ
・デスクトップブラウザ
・モバイルブラウザ
・サポートページ
■パッケージマネージャー対応
■特定用途向けBootstrap
・AngularJS用Bootstrap「UI Bootstrap」
・WordPress用Bootstrap「BootstrapWP」

補足情報
■同様製品
■オフィシャルサイト
・オフィシャルサイト
・ライセンス情報
・ダウンロード

「Bootstrap」基本情報

■概要

Bootstrap(ブートストラップ)とは、Webサイト/WebアプリをCSSで開発するためのWebフレームワークです。「レスポンシブデザイン」や「グリッドシステム」などの特徴があります。

■基本説明

Bootstrapは、HTML/CSS/JavaScriptでWebサイト/Webアプリを開発するためのWebフレームワークです。

世界で最も人気のあるWeb(CSS)フレームワークとされています。

「応答性の高いグリッドシステム」「豊富な組み込みコンポーネント」「jQueryで構築された強力なプラグイン」などを使用して、レスポンシブデザインを構築できます。

HTML/CSSなどのWebデザインの知識がない人でも簡単に見栄えの良いWebデザインを作成できます。

■経緯

モバイルファーストへの潮流

近年、スマートフォンやタブレットなどのモバイルデバイスの利用者が爆発的に増えたことで、モバイルデバイスでのWebデザインにも対応できるさまざまなCSSフレームワークが登場してきています。

「Twitter Bootstrap」→「Bootstrap」

Bootstrapは、Twitter社内で開発されたもので、「Twitter Bootstrap」と呼ばれていました。

その後、「Bootstrap」と呼ばれるようになっています。

主な特徴

■非CSS専門家でも見栄えの良いサイトデザインに

「CSS」とは

CSS(Cascading Style Sheets)とは、Webページのスタイルを指定するための言語です。

HTMLで作成されるWebページに対してCSSを適用することで、サイト全体として統一的なデザインを設定できます。

CSSに関するハードルの高さ

従来、Webサイト作成においては「HTMLで文書構造作成」「CSSでデザイン指定」を行うため、HTMLとCSSの知識が求められていました。

専門的なCSSの知識についてマスターするための学習コストはかなり大きいため、一般の人が容易に手を出せない領域にありました。

BootstrapはCSSを適用するだけ

Bootstrapでは、あらかじめ用意されているCSSを適用することでWebデザインを行えるため、自分でCSSのスタイル定義を行うことなく、統一されたWebサイトをデザインできます。

非デザイナーでも非エンジニアでもWebサイトを作成できる

そのため、「HTMLとCSSの知識を持たない非デザイナー」でも「JavaScriptに関する知識を持たない非エンジニア」でも、「洗練/統一され見栄えがよい」かつ「使いやすい」Webサイトを作成できます。

■レスポンシブWebデザイン

レスポンシブとは

「レスポンシブ」とは、1つのWebページで、「PC」「スマートフォン」「タブレット」など、さまざまなデバイスに対応することを意味します。

「レスポンシブWebデザイン」とは、「レスポンシブ」かつ「デバイスごとに使いやすい適切なデザインになっている」ことを指します。

レスポンシブ登場前の状況

レスポンシブという概念が登場する前まで、Webサイトは「PC向けサイト」と「スマートフォン向けサイト」の2つを用意する必要がありました。

そのため、ページごとに別々な構造や見栄え調整を行う必要があり、サイト構築の手間が2倍以上になってしまうという問題を抱えていました。

Bootstrapは「レスポンシブWebデザイン」に対応

Bootstrapは「レスポンシブWebデザイン」に対応しているため、1つのWebページを作成するだけで、さまざまなデバイスに対応できます。

そのため、サイト構築の効率を大幅に高めることができます。

■グリッドシステム

「グリッドシステム」とは

「グリッドシステム」とは、レスポンシブWebデザインを実現するための仕組みです。画面幅が異なるデバイスで表示された場合にレイアウトを自動調整します。

Bootstrapのグリッドシステムでは、一連の「コンテナ」「行」「列」を使用して、コンテンツをレイアウトします。

モバイルデバイス基準

Bootstrapではモバイルデバイスの表示をデフォルトとしているため、「PCなどのモバイルよりも大きな画面で表示した場合に、どのようなスタイルに変更するのか?」について設定します。

■Bootstrapテーマ

Bootstrapの公式テーマサイトで、洗練されたデザインテーマテンプレートがリストされています。

「無料で利用できるテーマ」や「見た目や使いやすさが考慮されている有料テーマ」を取得できます。

→Bootstrap →Bootstrapテーマ

Webフレームワーク

■概要

BootstrapはWebフレームワークであり、Webサイトでよく使われる「フォーム」「ボタン」「メニュー」などの部品がテンプレートとして用意されています。

レスポンシブデザイン対応は「jQuery(JavaScript)」でコントロールされます。

HTML5のdoctypeに準拠する必要があります。

■高速開発

Bootstrapでは、あらかじめ提供されているテーマ(CSS)を利用することで、デザイン性や操作性も確保できるため、最低限の設定のみで、見た目がよく使いやすいWebサイトを構築できます。

開発者はWebサイト構築において、デザインのためにコードを書く作業はできるだけ削減して、クリエイティブな作業に時間をかけることができます。

Webシステムの管理画面などでBootstrapが採用されるケースも増えています。

■小規模から大規模のサイト/アプリに対応

Bootstrapは、小規模から大規模までのWebサイト(Webアプリ)に対応できるため、非常に幅広い用途で利用できます。

■コンポーネント

Bootstrapではさまざまなコンポーネントが用意されています。
・ボタン
・テーブル
・ナビゲーション
・パンくずリスト
・スライドショー
・フォーム
・タイポグラフィ---文字をきれいに読みやすく見せる設定
・その他構成要素

■jQuery(JavaScriptライブラリ)の使用

概要

Bootstrapの多くのコンポーネントでは、「jQuery(JavaScriptライブラリ)」や「Popper.js」などを使用して機能させる必要があります。

読み込んで利用する方法としては以下の2パターンがあります。
①ソースをダウンロードしてローカルに配置して読み込む
②すでにホストされているファイルをインターネット経由で読み込む

jQuery(JavaScriptライブラリ)が必要なコンポーネント

・トグル機能
・チェックボックス
・ラジオボタン
・スライド機能
・コンテンツ表示折りたたみ機能
・ドロップダウン
・ビヘイビアの表示/配置/スクロール用モーダル
・ツールチップ
・ポップオーバー
・スクロール動作
・ナビゲーション更新 など

■ビルドツール(NPMスクリプト)

Bootstrapは、ビルドシステムとしてNPMスクリプトを使用します。

「コードコンパイル」「テスト実行」など、フレームワークを扱うための便利なメソッドが含まれています。

■サポートブラウザ

デスクトップブラウザ

Bootstrapは、主要なデスクトップブラウザをサポートしています。
・Chrome
・Firefox
・Firefox(Extended Support Release版)
・Internet Explorer(10以降)
・Edge
・Opera
・Safari

正式サポートされていませんが「Chromium」「Chrome for Linux」「Linux用Firefox」「Internet Explorer 9」でも、ある程度動作可能とされています。

モバイルブラウザ

Bootstrapは、主要なモバイルブラウザをサポートしています。
・Chrome
・Firefox
・Safari
・Android Browser & WebView
・Edge

サポートページ

詳細はオフィシャルサイトを参照ください。

→Bootstrap →Documentation →Browsers and devices

■パッケージマネージャー対応

Bootstrapは主要なパッケージマネージャーに対応しています。
・npm
・RubyGems
・Composer
・NuGet など

■特定用途向けBootstrap

Bootstrapは、各用途に特化した拡張版も存在します。

AngularJS用Bootstrap「UI Bootstrap」

「UI Bootstrap」は、JavaScriptフレームワーク「AngularJS」と連携できるBootstrapです。

AngularJSは大規模フレームワークであるためBootstrapの適用は難しいのですが、「UI Bootstrap」を利用することで、Bootstrapの優れた機能を活用できます。

→GitHub →UI Bootstrap(Bootstrap components written in pure AngularJS by the AngularUI Team)

WordPress用Bootstrap「BootstrapWP」

「BootstrapWP」は、CMS「WordPress」用にカスタマイズされたBootstrapです。

WordPressのブログ作成機能と、Bootstrapのサイトデザイン機能を利用して、簡単に優れたWebページを作成できます。

→BootstrapWP(Bootstrap WordPress Tutorials)

補足情報

■同様製品

同様な機能を提供する製品として、次のようなものがあります。

オープンソース製品:「Primer」など。

■オフィシャルサイト

オフィシャルサイト

→Bootstrap(The most popular HTML, CSS, and JS library in the world.)

ライセンス情報

Bootstrapのライセンスは「MIT license」です。

詳細について、こちらを参照ください。
→Bootstrap →Documentation →License FAQs

ダウンロード

→Bootstrap →Download

 

参考元サイト

※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。

Bootstrap最新TOPICS

【OSS】CSSフレームワーク「Bootstrap 4」リリース---多数の機能追加、グリッドシステム改善、コンパイル高速化、JavaScriptプラグイン改善(2018年01月28日 20:03)

Bootstrap開発チームは、1月18日、 CSSフレームワーク「Bootstrap 4」を公開した。 【Bootstrapとは】 フロントエンドWebアプリケーション用CSSフレームワーク https://www.ossnews.jp/oss_info/Bootstrap 【ポイント】 ・メジャーリリース(多数の機能追加) ・グリッドシステムはCSS3レイアウトモジュール...

Bootstrap最新CLOSEUPコラム

無料資料プレゼント

第2回「多要素認証の種類と方法」

講演資料を見るには、 プライバシーポリシーに同意して、送付先メールアドレスをご入力しご請求ください。

またご入力いただきました情報は、当該資料の作成・提供企業とも共有させていただき、当社及び各社のサービス、製品、セミナー、イベントなどのご案内に使用させていただきます。

本資料を見るには次の画面でアンケートに回答していただく必要があります。



  • オープソース書籍(サイド)
  • OSSNEWSに広告を掲載しませんか?

facebook

twitter