Bootstrap(ブートストラップ)。フロントエンドWebアプリケーション用CSSフレームワークです。幅広く利用されており、「レスポンシブデザイン」「グリッドシステム」などの特徴があります。

Bootstrapとは

Bootstrap(ブートストラップ)。フロントエンドWebアプリケーション用CSSフレームワークです。幅広く利用されており、「レスポンシブデザイン」「グリッドシステム」などの特徴があります。

基本情報

概要

Bootstrap(ブートストラップ)とは、フロントエンドWebアプリケーション用CSSフレームワークです。幅広く利用されており、「レスポンシブデザイン」「グリッドシステム」などの特徴があります。

基本説明

Bootstrapは、Twitter社が開発したCSSのフレームワークです。「CSS(Cascading Style Sheets)」とは、Webページスタイルを定義するための言語です。

通常、CSSを作成する場合、すべてのスタイルについて1つずつ自分で作成しなければなりません。しかし、Bootstrapを使用すると、よく使われるスタイルがあらかじめ定義してあるので、ルールに沿って設定するだけで、整ったデザインページを作成できます。

HTML/CSSの基礎知識があれば、それほど詳しくなくても、デザイン性に富み洗練されたWebページを作成できます。

経緯

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

2011年、初版がリリースされました。

TOPに戻る

主な特徴

統一デザインを適用できる

用意されているCSSファイルをHTMLファイルに読み込むだけで、統一されたスタイルデザインを適用できます。

一度、Bootstrapでフロントエンドを作成すれば、CSSを入れ替えるだけで、異なるテーマ/カラースタイルを適用できます。多くのサイトで、テーマが無料配布されています。

プロトタイプ開発段階でも簡単に見栄えを整えられます。

レスポンシブデザイン

Bootstrapは「レスポンシブデザイン」に対応しています。

各種表示デバイス(PC/タブレット/スマートフォン)の表示領域仕様に応じて、Webページレイアウトが動的調整されます。各種デバイスごとにレイアウトスタイルを作成する必要がなく、単一のHTMLで各種デバイスに対応できます。

レスポンシブデザインでは、デザインの自由度が若干下がりますが、メンテナンスコストを大幅に削減できます。

グリッドシステム

レスポンシブWebデザインレイアウトを作成するための仕組みとして「グリッドシステム」が用意されています。

「グリッドシステム」とは、画面を12カラムのテーブルのように区切り、それぞれにデザイン要素を配置する仕組みです。デザイン要素ごとに横並び表示させるカラム数を指定します。

コンポーネント(構成要素)

コンポーネント(構成要素)として、「ナビゲーション」「グローバルナビ」「パンくずリスト」「パネル」など多数用意されています。

JavaScript対応

軽量JavaScriptライブラリ「jQuery」プラグイン形式で、一部のJavaScriptを使用できます。

「ダイアログボックス」「モーダルウィンドウ」「ドロップダウン」「タブ」「ツールチップ」「ポップオーバー」「アラート」「ボタン」「スライドショー」などの機能を利用できます。

プラグイン/拡張ライブラリ

Bootstrapはプラグインを導入することで、さまざまな機能拡張が行なえます。

主要ブラウザに対応

各種主要ブラウザ(Chrome/Firefox/Safariなど)に対応しています。

TOPに戻る

同様製品

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

オープンソース製品:Github製「Primer」、Google製「Material UI」など。

TOPに戻る

導入事例

「NASA(アメリカ航空宇宙局)」「MSNBC」などで採用されています。

GitHubでも高い人気を誇っており、テーマや日本語ドキュメントも充実しています。

TOPに戻る

ライセンス情報

Bootstrapのライセンスは「MIT License」です。このライセンスに従うことを条件として、ソースコードの改変と公開が許可されています。

TOPに戻る

ダウンロード

ダウンロードページ

TOPに戻る

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

Bootstrap最新TOPICS

最新情報はありません。

Bootstrap最新CLOSEUPコラム

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

facebook

twitter