【OSS情報アーカイブ】Bootstrap

※当記事に記載されている情報は、古くなっている場合があります。オフィシャルサイトで最新情報をご確認ください。

「Bootstrap」とは

「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」と呼ばれるようになっています。

■オフィシャルサイト情報

オフィシャルサイト

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

ライセンス情報

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

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

ダウンロード

→Bootstrap　→Download

■同様製品

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

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

「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テーマ

「Bootstrap」のWebフレームワーク機能

「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)

　

参考元サイト

• Bootstrap
• 侍エンジニア塾　→Bootstrapとは？意味や特徴、種類を徹底解説
• TechAcademy MAGAZINE　→Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】
• Bootstrap3の使い方　→Bootstrapとは？
• Udemyメディア　→Bootstrapとは何かを実際にヘッダーを作って学べる記事！
• Wikipedia　→Bootstrap
• ＠IT　→Webデザイン初心者でもできる、Bootstrapの使い方超入門
• くりたま.jp　→Bootstrapとは？初心者向けで便利なCSSフレームワークの使い方
• HTMLクイックリファレンス　→CSSの基本

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

この記事のタグ一覧

• Bootstrap

  1

• 一覧はこちら
• 次の記事へ