Bootstrapを使うための準備
ではさっそく、Bootstrapを作ったWebアプリを作っていきましょう。
Bootstrapの公式サイトにアクセスして、Bootstrapをダウンロードします。
［Download Bootstrap］をクリックし、［Download Source］ボタンをクリックして、Bootstrapをダウンロードします。ダウンロードしたzipファイルを任意のフォルダに解凍します。
ダウンロードしたBootstrapのソースファイルのdocs¥examples配下には、いくつかのサンプルファイルが用意されています。どのようなWebアプリが作成できるかを確認してみてください。
また、これらのサンプルはレスポンシブWebに対応しています。レスポンシブWebとは、1つのソースファイルで異なる種類のデバイスや画面サイズに適したWebアプリを作ることを言います。試しに、パソコンのブラウザの表示幅を狭く（768px以下に）して表示してください。すると、ワイド幅では表示されていたメニューが非表示になっているのが分かります。スマートフォンなどでは、限られた画面サイズしかありませんので、メニューは必要に応じて表示/非表示を切り替えられると便利です。
ひな形フォルダの作成
では、早速Bootstrapを使ったWebアプリを作るために、もとになるひな形フォルダを作成します。
さきほどダウンロードしたファイルの中のdocs¥distフォルダをコピーし、「Template」という名前にします。
作成したひな形フォルダの構成は次のようになっています。
| フォルダ名 | 説明 |
|---|---|
| cssフォルダ | デザインを決めるスタイルシートが格納 |
| fontsフォルダ | フォントアイコンのファイルが格納 |
| jsフォルダ | JavaScriptのコードが格納 |
なお、拡張子の前に「min」とついているファイルはデータ容量の削減のため、コードからスペースや改行など、プログラムの動作と関係しない文字を削除した最小構成のファイルです。
次に、これらのCSSやJavaScriptを利用するためのHTMLファイルを作成します。
Bootstrapの公式サイトにアクセスすると、［Getting start］－［Basic template］にひな形となるHTMLファイルが公開されています。これをもとにして、先ほど作成した［Temnplate］フォルダに、新しくindex.htmlファイルを作成します。
ここでは、以下のようなindex.htmlを作成していきます。
<!DOCTYPE html>
<!-- 1. 言語を日本語に設定する-->
<html lang="ja">
<head>
<!-- 2. charsetをutf-8に設定する-->
<meta charset="utf-8">
<!-- 3. ビューポートの設定-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CodeZine Bootstrap Sample</title>
<!-- 4. Bootstrapで使うCSSの読み込み-->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
～中略:ここにコンテンツを記述する～
<!-- 5. jQueryの読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- 6. Bootstrapで使うJavaScriptの読み込み-->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
1は言語を日本語にする設定で、2は文字コードをUTF-8にする設定です。
3はビューポートの設定をしています。ビューポートとは、アプリを表示する場所のことです。width=device-widthは「表示する幅をデバイスの横幅で描画する」という意味です。また、initial-scale=1は「ページが最初に読み込まれるときの拡大率を1.0（等倍）にする」という意味です。
4でBootstrapが使用するCSSファイルを読み込みます。
5はjQueryの読み込みの設定です。Bootstrapは内部でjQueryを使います。6はBootstrapで動きのあるコントロールを制御するためのJavaScriptの読み込み設定です。
3～6については、Bootstrapを使うために必要な設定なので、削除しないようにしてください。
これで、Bootstrapを使う準備が整いました。このひな形フォルダをテンプレートにして、Webアプリを作成していきます。
