Bootstrap はじめに

❮ 前章へ次章へ ❯

Bootstrap とは ?

Bootstrap は、迅速かつ容易に Web を開発するためのフリーなフロントエンド・フレームワークです
Bootstrap には、オプションの JavaScript プラグインだけでなく、タイポグラフィー、フォーム、ボタン、テーブル、ナビゲーション、モーダル、画像カルーセルなどのための、HTML と CSS ベースのデザインテンプレートが用意されています
Bootstrap はまた、簡単にレスポンシブなデザインを作成するための機能も提供します

レスポンシブ Web デザインとは？

レスポンシブ Web デザインとは、小型のスマホから大型のデスクトップまで、すべての装置で適切に表示できるように、自分自身を自動的に調整する web サイトを構築することです。

Bootstrap の歴史

ブートストラップは、Twitterで Mark Otto と Jacob Thornton により開発され、 2011年8月にオープンソース製品として GitHub でリリースされました。

2014年6月には、Bootstrap は GitHub の No.1 プロジェクトになりました！

Bootstrap をなぜ使用するのか ?

Bootstrap の利点：

使用するのが容易： HTML と CSS の基礎的な知識だけで、誰でも Bootstrap を使用できます
レスポンシブ機能： Bootstrap のレスポンシブ CSSは、スマホ、タブレット、デスクトップに合うサイズへ調整します
Mobile-first アプローチ： Bootstrap 3 では、mobile-first スタイルはコアフレームワークの一部です
ブラウザの互換性： Bootstrap は、すべての最新ブラウザ（Chrome、Firefox、Internet Explorer、Safari、Opera）と互換性があります

Bootstrap はどこから取得しますか？

自分の Web サイトでブートストラップを使用するには、次の 2 つの方法があります。

可能な方法：

getbootstrap.com から Bootstrap をダウンロードする
CDN から Bootstrap をインクルードする

Bootstrap のダウンロード

自分で Bootstrap をダウンロードしてホストしたい場合は、 getbootstrap.comに行き、そこの指示に従ってください。

Bootstrap の CDN

ダウンロードして Bootstrap をホストしたくない場合は、CDN (Content Delivery Network) からそれをインクルードすることができます。

MaxCDN は、Bootstrap の CSS と JavaScript の CDN サポートを提供します。また、jQuery もインクルードしなければなりません：

MaxCDN:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap CDN を使用する 1 つの利点：
多くのユーザが、別なサイトを訪問した際に、MaxCDN から既に Bootstrap をダウンロードしていることが考えられます。その結果、あなたのサイトを訪問したときには、キャッシュからロードされるのでロードがより速くなります。また、ユーザがファイルを要求すると、ほとんどの CDN はより高速なロードが可能な最も近いサーバから提供することを確認します。

Bootstrap による最初の Web ページの作成

1. HTML5 doctype の追加

Bootstrap は、HTML5 doctype を必要とする HTML 要素と CSS プロパティを使用しています。

常に、ページの先頭に HTML5 doctype を指定するとともに、lang 属性と正しい文字セットを指定します：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

2. Bootstrap 3 はモバイルファースト

Bootstrap 3 は、モバイル機器にレスポンシブであるように設計されています。Mobile-first スタイルは、コアフレームワークの一部です。

適切なレンダリングとタッチズームを確実なものにするために、<head> 要素の中に、次の <meta> タグを追加します：

width=device-width の箇所は、デバイスの画面幅に従った（デバイスによって変わる）ページの幅を設定します。

initial-scale=1 の部分は、ブラウザによって初めてロードされた時のページのズームレベルを設定します。

3. コンテナ

Bootstrap は、サイトのコンテンツをラップするためにコンテナ要素も必要とします。

コンテナには 2 種類あり、その 1 つを選択します：

.container クラスは、レスポンシブな 固定幅のコンテナ を提供します
.container-fluid クラスは、ビューポートの幅全体に広がるレスポンシブな 全幅のコンテナ を提供します

注: container はネストできません（container 内に別のコンテナを置くことはできません）。

2つの基本的な Bootstrap のページ

次の例は、レスポンシブで固定幅コンテナの基本的な Bootstrap ページのコードを示します：

例

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

Try it Yourself »

次の例は、全幅コンテナの基本的な Bootstrap ページのコードを示しています：

例

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

Try it Yourself »

❮ 前章へ Next ❯