Bootstrapは、HTMLやCSSやJavaScriptで構成されるフロントエンドの Webアプリケーションフレームワークです。
フレームワークとは、枠組みや骨組みを意味する言葉です。 WebサイトやWebアプリケーションを構築する上で、その骨組みを提供したり、 よく使用する汎用的な機能をまとめて提供するものを Webアプリケーションフレームワークと言います。
フレームワークと似たものにライブラリがあります。 ライブラリは、よく使用する機能を部品化し、それを集めてパッケージ化したものです。 ライブラリが単にコードの再利用を目的としているのに対し、 フレームワークは設計レベルの再利用を目的としています。 ライブラリは部品の集まりですから、部品をどのように組み合わせ、 最終的にどのようなWebサイト・Webアプリケーションにするのかは、製作者に委ねられます。 一方、フレームワークでは、全体の骨組みをテンプレートとして用意し、 製作者はテンプレートの肉付け作業を行います。 Webサイト・Webアプリケーションの土台が既にあるので、後は枠にはめていくだけです。
フレームワークには主に以下の利点があります。
現在、Web政策に置いて、マルチデバイス対応の手法の主流となっているのが、 レスポンシブWebデザイン (Responsive Web Design)です。 1つのWebページで、スマートフォンやタブレットやPCなど複数のデバイスに合わせた 最適なレイアウトで表示する手法です。
レスポンシブWebデザインを構成するのは主に以下の技術です。
グリッドシステム (Grid System)は、グリッド(縦横線の格子)状のガイドラインを下地に、 画像や文字をブロックごとに配置する手法を指します。 統一感や一貫性といったレイアウトのクオリティを維持するために使用されてきました。
近年は、Webページのレイアウト手法としても用いられる機会が増え、 Bootstrapをはじめとする多くのCSSフレームワークのレイアウト手法としても採用されています。
Bootstrapでは、レイアウトを縦に12分割した12カラムのグリッドシステムが採用されており、 横一行の合計が12カラムになるようにレイアウトをしていきます。 グリッドシステムとレスポンシブWebデザインを組み合わせて、モバイルでは12カラム分、 デスクトップでは4カラム分といった、画面に応じたコンテンツの配置が可能になります。
Bootstrapは、フォームやボタンやナビゲーションなどのGUIのパーツも用意しています。 このような要素をコンポーネントと言います。
洗練されたデザインのコンポーネントを自作しようとすると、かなりの時間がかかります。 Bootstrapを利用すると、HTMLのタグにクラスを追加するだけで、 体裁の整ったコンポーネントを利用できます。
Bootstrap 4では、コンポーネント、jQueryプラグイン、ドキュメントなど Bootstrap 3のほぼすべてが書き直されました。 中でも大きな変更点は以下の通りです。
Bootstrapを導入するにあたっては、これまでのフロントエンドの開発環境があればそれで十分です。 特別に必要となるものはありません。 必要なアプリケーションは、HTML、CSS、JavaScriptを編集するテキストエディタと、 表示を確認するWebブラウザです。
Bootstrapの公式サイト (http://getbootstrap.com/)にアクセスし、 [Documentation]の中の[Download] (http://getbootstrap.com/docs/4.1/getting-started/download/) に移動します。
このページの [Compiled CSS and JS]の下にある [Download]ボタンをクリックし、 ファイルのダウンロードを実行します。
ダウンロードしたファイルを解凍すると、cssフォルダとjsフォルダができます。 主にcssフォルダ内のbootstrap.min.cssを使用します。
BootstrapでWebサイトを構築する場合は、 ダウンロードしたCSSファイルやJavaScriptファイルをHTMLから読み込む必要があります。 作業フォルダを作成し、その中にcssフォルダとjsフォルダを作成します。 cssフォルダには、ダウンロードしたbootstrap.min.cssを格納します。 jsフォルダには、bootstrap.bundle.min.jsを格納します。
HTMLの雛形を以下に示します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1 class="text-success">Hello, world!</h1>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Stack Pathが無償で提供しているBootstrap CDNを利用することもできます。 リスト1-4のサンプルは、Bootstrap公式サイトの「Starter template」を元にしています。 前述の雛形との違いは、ファイルの参照先がCDNになっている点と、 CDNからのクロスサイトスクリプティング (XSS) を防ぐため、 integrity属性とcrossorigin属性がある点です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
Bootstrapのレイアウトは、ページ幅を12列に分割したグリッドシステムを採用しています。 この機能は、ページを2段組みや3段組みにしたり、コンポーネントを横に並べて配置したりする 場合などに活用できます。
12列に分割したグリッドの列をカラム (column:列)と言います。 各カラムの間の余白をガター (gutter:溝)と言います。
各カラムの左右内側 (padding)には 15pxのガターが設定されているため、 コンテンツ間の余白は 30pxとなります。
Bootstrapのグリッドシステムを使用してレイアウトする際、 最初に使用するのがコンテナ (container)です。 コンテナは、コンテンツを格納する箱で、ページの水平中央にコンテンツを配置します。
コンテナには、固定幅コンテナと可変幅コンテナの2種類があります。 画面サイズによってコンテンツの最大幅を切り替える場合は、 固定幅コンテナのcontainerクラスを使用します。
<div class="container">
<!-- ここにコンテンツを入れる -->
</div>
画面サイズ全幅に渡る流動的なコンテンツ幅を持たせるには、 可変幅コンテナのcontainer-fluidクラスを使用します。
<div class="container-fluid">
<!-- ここにコンテンツを入れる -->
</div>
コンテナの中に、rowクラスを格納します。 rowクラスは、カラムをレイアウトするために使用するクラスで、この中にコラムをまとめます。 複数行にしたい場合は、containerの中にrowクラスを指定した要素を追加します。
<div class="container">
<div class="row"><!-- 1行目 -->
<!-- ここにコンテンツを入れる -->
</div>
<div class="row"><!-- 2行目 -->
<!-- ここにコンテンツを入れる -->
</div>
</div>
以下の例では、3つの等幅カラムを作成します。 colクラスを指定した3つのカラムは、rowクラスを指定した要素で1行にまとめられます。
<div class="container">
<div class="row">
<div class="col">1列目</div>
<div class="col">2列目</div>
<div class="col">3列目</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">1列目</div>
<div class="col">2列目</div>
</div>
<div class="row">
<div class="col">1列目</div>
<div class="col">2列目</div>
<div class="col">3列目</div>
</div>
</div>
<h3>1列カラム × 12列分</h3>
<div class="container">
<div class="row">
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
</div>
</div>
<h3>2列カラム + 4列カラム + 6列カラム = 12列分</h3>
<div class="container">
<div class="row">
<div class="col-2">col-2</div>
<div class="col-4">col-4</div>
<div class="col-6">col-6</div>
</div>
</div>
<h3>5列カラム + 7列カラム = 12列分</h3>
<div class="container">
<div class="row">
<div class="col-5">col-5</div>
<div class="col-7">col-7</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div class="col">col</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col-auto">col-auto</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col">col</div>
<div class="col-md-auto">col-md-auto : Medium以上でコンテンツによって幅が可変</div>
<div class="col">col</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
<h3>ペース:全幅+半幅カラム、Medium以上:8列+4列カラム</h3>
<div class="container">
<div class="row">
<div class="col-12 col-md-8">col-12とcol-md-8</div>
<div class="col-6 col-md-4">col-6とcol-md-4</div>
</div>
</div>
<h3>ペース:半幅カラム×3、Medium以上:4列カラム×3</h3>
<div class="container">
<div class="row">
<div class="col-6 col-md-4">col-6とcol-md-4</div>
<div class="col-6 col-md-4">col-6とcol-md-4</div>
<div class="col-6 col-md-4">col-6とcol-md-4</div>
</div>
</div>
<h3>垂直上揃え:align-items-start</h3>
<div class="container">
<div class="row align-items-start">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
<h3>垂直中央揃え:align-items-center</h3>
<div class="container">
<div class="row align-items-center">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
<h3>垂直下揃え:align-items-end</h3>
<div class="container">
<div class="row align-items-end">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">align-self-start</div>
<div class="col align-self-center">align-self-center</div>
<div class="col align-self-end">align-self-end</div>
</div>
</div>
<h3>水平左揃え:justify-content:flex-start</h3>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
</div>
<h3>水平中央揃え:justify-content:flex-center</h3>
<div class="container">
<div class="row justify-content-center">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
</div>
<h3>水平右揃え:justify-content:flex-end</h3>
<div class="container">
<div class="row justify-content-end">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
</div>
<h3>等間隔に配置:justify-content:space-around</h3>
<div class="container">
<div class="row justify-content-around">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
</div>
<h3>両端から均等に配置:justify-content:space-between</h3>
<div class="container">
<div class="row justify-content-between">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
</div>
<h3>no-guttersありの場合</h3>
<div class="container">
<div class="row no-gutters">
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
<h3>no-guttersなしの場合(参考)</h3>
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
<h3>コンテナなし、no-guttersありの場合</h3>
<div class="row no-gutters">
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="container">
<div class="row">
<div class="col-9">col-9</div>
<div class="col-4">col-4<br>
9列+4列=13列。このカラムで12列を超えるため、新しい行に折り返される</div>
<div class="col-6">col-6<br>
4列+6列=10列。このカラムは12列以内に収まっているため、新しい行内に継続される</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">第1のカラム(順序指定ない)</div>
<div class="col order-12">第2のカラム(順序指定は12)</div>
<div class="col order-1">第2のカラム(順序指定は1)</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">第1のカラム(順序指定ない)</div>
<div class="col">第2のカラム(順序指定ない)</div>
<div class="col order-first">第3のカラム(順序指定は1)</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 offset-md-4">col-md-4とoffset-md-4</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-sm-5 col-md-6">col-sm-5とcol-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 ml-md-auto">col-md-3とml-md-auto</div>
<div class="col-md-3 ml-md-auto">col-md-3とml-md-auto</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-9">第一階層:col-sm-9
<div class="row">
<div class="col-8 col-sm-6">第二階層:col-8とcol-sm-6</div>
<div class="col-4 col-sm-6">第二階層:col-4とcol-sm-6</div>
</div>
</div>
<div class="col-sm-3">第一階層:col-sm-3</div>
</div>
</div>